Fix mortgage range slider

assets/js/opalestate.js

@@ -465,11 +465,7 @@ jQuery( document ).ready( function ( $ ) {
     if ( $( '.opalestate-datepicker' ).length > 0 ) {
         $( '.opalestate-datepicker' ).datepicker( { minDate: 0 } );
     }
-    //
 
-    /**
-     *
-     */
     $( '.list-property-status li' ).click( function () {
         $( '.opalestate-search-form [name=status]' ).val( $( this ).data( 'id' ) );
         $( '.list-property-status li' ).removeClass( 'active' );
@@ -496,10 +492,15 @@ jQuery( document ).ready( function ( $ ) {
         var slider = $( '.slide-ranger-bar', this ).get( 0 );
         var unit_pos = $( this ).data( 'unitpos' );
         var unit_thousand = $( this ).data( 'thousand' );
+        var step = $( this ).data( 'step' );
+        var format = $( this ).data( 'format' );
+        step = step ? step : 1;
+        format = format ? format: 1;
 
         var config_format = {
             decimals: decimals,
             thousand: unit_thousand,
+            step: step,
         };
 
         if ( unit_pos == 'prefix' ) {
@@ -509,22 +510,28 @@ jQuery( document ).ready( function ( $ ) {
         }
 
         var nummm = wNumb( config_format );
+
         var istart = [ imin, imax ];
         if ( mode && mode == 1 && start ) {
             istart = [ start ];
         }
 
-        noUiSlider.create( slider, {
+        var options = {
             range: {
                 'min': [ min ],
                 'max': [ max ]
             },
-            step: 0.1,
+            step: step,
             connect: true,
             start: istart,
-            format: nummm,
             direction: opalesateJS.rtl == 'true' ? 'rtl' : 'ltr',
-        } );
+        };
+
+        if ( format ) {
+            options.format = nummm;
+        }
+
+        noUiSlider.create( slider, options );
 
         slider.noUiSlider.on( 'update', function ( values, handle ) {
             var val = values[ handle ];

assets/opalestate.css

@@ -4010,6 +4010,10 @@ header#masthead {
   position: relative;
 }
 
+.opalestate-box .type-opalestate_property:last-of-type {
+  margin-bottom: 0;
+}
+
 .opalestate-price-input-wrap {
   display: flex;
   align-items: center;

assets/scss/opalestate/_properties-loop.scss

@@ -677,3 +677,7 @@ header{
     border: solid 1px #ebebeb;
     position: relative;
 }
+
+.opalestate-box .type-opalestate_property:last-of-type {
+    margin-bottom: 0;
+}

inc/function-search-fields.php

@@ -35,7 +35,7 @@ function opalestate_property_render_field_template( $field, $label, $type = 'sel
                 <div class="input-group-number">
                     <i class="<?php echo opalestate_get_property_meta_icon( $field ); ?>"></i>
                     <input class="form-control" value="<?php echo $qvalue ? $qvalue : $input_default_value; ?>" type="text" name="info[<?php echo $field; ?>]" placeholder="<?php echo esc_attr(
-                            $label ); ?>"/>
+						$label ); ?>"/>
                     <div class="btn-actions">
                         <span class="btn-minus"><i class="fa fa-minus"></i></span>
                         <span class="btn-plus"><i class="fa fa-plus"></i></span>
@@ -166,6 +166,7 @@ function opalesate_property_slide_ranger_template( $label, $data ) {
 		'unit_thousand' => ',',
 		'mode'          => 2,
 		'start'         => '',
+		'step'          => 1,
 	];
 
 	$data = array_merge( $default, $data );
@@ -173,8 +174,8 @@ function opalesate_property_slide_ranger_template( $label, $data ) {
 	extract( $data );
 	?>
     <label class="opalestate-label opalestate-label--<?php echo sanitize_title( $label ); ?>"><?php echo esc_html( $label ); ?></label>
-    <div class="opal-slide-ranger" data-unit="<?php echo $unit; ?>" data-unitpos="<?php echo $unit_position ?>" data-decimals="<?php echo $decimals; ?>" data-thousand="<?php echo esc_attr(
-		$unit_thousand ); ?>">
+    <div class="opal-slide-ranger" data-unit="<?php echo esc_attr( $unit ); ?>" data-unitpos="<?php echo esc_attr( $unit_position ); ?>" data-decimals="<?php echo esc_attr( $decimals ); ?>"
+         data-thousand="<?php echo esc_attr( $unit_thousand ); ?>" data-step="<?php echo esc_attr( $step ); ?>">
         <label class="slide-ranger-label">
             <span class="slide-ranger-min-label"></span>
 			<?php echo ( $mode == 2 ) ? '<i>-</i>' : ''; ?>

templates/parts/mortgage-calculator.php

@@ -20,9 +20,9 @@ $deposit_color = apply_filters( 'opalestate_deposit_color', '#2f73e9' );
 
 wp_localize_script( 'opalestate-scripts', 'opalestate_mortgage',
 	[
-		'ajax_url'          => admin_url( 'admin-ajax.php' ),
-		'currency'          => esc_attr__( $currency ),
-		'deposit_color'     => $deposit_color,
+		'ajax_url'      => admin_url( 'admin-ajax.php' ),
+		'currency'      => esc_attr__( $currency ),
+		'deposit_color' => $deposit_color,
 	]
 );
 
@@ -74,6 +74,7 @@ $data_deposit = [
 
 $data_interest_rate = [
 	'id'         => 'interest_rate',
+	'decimals'   => 2,
 	'unit'       => '%',
 	'ranger_min' => 0,
 	'ranger_max' => 100,
@@ -81,16 +82,19 @@ $data_interest_rate = [
 	'input_max'  => 100,
 	'mode'       => 1,
 	'start'      => $rate_start,
+	'step'       => 0.05,
 ];
 
 $data_years = [
 	'id'         => 'years',
+	'decimals'   => 1,
 	'ranger_min' => 0,
 	'ranger_max' => 30,
 	'input_min'  => 0,
 	'input_max'  => 30,
 	'mode'       => 1,
 	'start'      => $years_start,
+	'step'       => 0.5,
 ];
 
 if ( opalestate_options( 'currency_position', 'before' ) == 'before' ) {