CODEWITHSUNDEEP
jquery-uijquery-ui-draggablejquery-ui-slider
Andre Trevas
Andre Trevas

Reputation: 51

jQuerty UI range slider bug after change min value

I have one slider in my page, with this code

<div id="sale-price-range" class="price-range" data-min="200000" data-max="2000000" data-unit="R$" data-min-field="precoMinVenda" data-max-field="precoMaxVenda" data-increment="100000"></div>

My js code is:

// Price Range
$(".price-range").each(function() {

    var dataMin = $(this).attr('data-min');
    var dataMax = $(this).attr('data-max');
    var dataUnit = $(this).attr('data-unit');
    var minField = $(this).attr('data-min-field');
    var maxField = $(this).attr('data-max-field');
    var increment = $(this).attr('data-increment');

    $(this).append( "<input type='text' class='first-slider-value' name='"+minField+"' val=''/><input type='text' class='second-slider-value' name='"+maxField+"'/>" );

    $(this).slider({
        range: true,
        min: 0,
        max: dataMax,
        step: increment,
        values: [ dataMin, dataMax ],

        slide: function( event, ui ) {
            event = event;
            if(ui.value < dataMin) {
                return false;
            }
            $(this).find( ".first-slider-value" ).val( dataUnit + " " + ui.values[ 0 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") );
            $(this).find( ".second-slider-value" ).val( dataUnit + " " + ui.values[ 1 ].toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") );
        },
        stop: function(event,ui) {
            if(ui.value >= dataMin) {
                postAjaxSearch();
            }
        }
    });
     $(this).find( ".first-slider-value" ).val( dataUnit + " " + $( this ).slider( "values", 0 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") );
     $(this).find( ".second-slider-value" ).val( dataUnit + " " +  $( this ).slider( "values", 1 ).toString().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1.") );
});

It works very well, but if I try to change min: 0, To min: dataMin,

My slider stop to work (I can't drag it). It continues to call postAjaxSearch();, but it doesn't change max/min value neither move the slider-handle.

Why do I need to change min to dataMin? Because my slider start from 0, but the slider-handle move from dataMin from dataMax. The range betweem dataMin and 0 is on page, but can't move there. I don't want this, the slider should start from dataMin.

Work, but with this space on left (min: 0) No space, but doesn't work (min: dataMin)

Upvotes: 2

Views: 1027

Answers (2)

Evgenii Res
Evgenii Res

Reputation: 1

One more solution

I encountered the same error with version 1.13.2. However, the solution with parseInt didn't help me;

What did help, was multiplying by 1000 for adjustment and then dividing same.

Still don't understand what the issue was...

before INIT slider incoming params was:

step = 1000

min = 33900

max = 1100000

selected_min = 33900

selected_max = 1100000

after init without * 1000 and / 1000 slider gave it to me

max_stop = 1099900

Correct for me was

$(element).slider({
   range: true,
   min: min * 1000,
   max: max * 1000,
   step,
   values: [selected_min * 1000, selected_max * 1000],
   slide: function (event, ui) {
      const min_stop = ui.values[0] / 1000;
      const max_stop = ui.values[1] / 1000;
      
      $(`#${attribute}-min`).val(min_stop);
      $(`#${attribute}-max`).val(max_stop);
   },
   stop: function (event, ui) {
       const min_stop = ui.values[0] / 1000;
       const max_stop = ui.values[1] / 1000;

       queryParams[attribute] = `${min_stop}-${max_stop}`;
       applyFilter();
   }
});

Upvotes: 0

Dennis de Best
Dennis de Best

Reputation: 1108

I had the same exact problem, I solved it by using parseInt() on the min value

$("#price-slider").slider({
        range: true,
        min: parseInt(price_min),
        max: price_max,
        values: [price_min, price_max],
        slide: function (event, ui) {
            $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
        }
    });

I have no idea why this works, it would seem logical that both extremes would work the same but apparently they don't.

Upvotes: 1

Related Questions