Search code examples
jqueryjquery-uijquery-ui-slider

jQuery UI Slider Steps

I have a jquery UI slider and I have noticed that if the difference between max and min value is not an exact multiple of step option the slider doesn't works correctly.

For example: min: 6900 max: 79900 step: 1500

When I move the max cursor, the maximum reachable value is 78900 ((78900-6900)/15=48), the next would be 80400.

How can I achieve the max value (79900)?

Thanks

Solution

  • You could set your max value to a multiple of step:

      var range = Math.floor((max - min) / step) + 1;
  var max_calc = min + range * step;

    then in slide handler limit the values to original max value:

    slide: function(event, ui) {
  var v1 = Math.min(ui.values[0], max);
  var v2 = Math.min(ui.values[1], max);
  $("#slider-price").slider("values", 0, v1);
  $("#slider-price").slider("values", 1, v2);
  $("#amount").val("$" + v1 + " - $" + v2);
}

    Your fiddle adapted accordingly: https://jsfiddle.net/beaver71/d8wvke7u/