Jquery slider step step in 10s, but the minimum value is 1

Question

I have a problem when I want the steps to increase by 10, starting from 1 to 1000.

The problem is that if the value is 1, the following values ​​are 11, then 21, etc. How can this be changed so that it starts with 1, 10, 20, 30, etc., so the first step is 9, then 10 after that.

Sometimes the value can go up to 1001, I figured that if you quickly reach the maximum value, it will stop at 1000, but if you stop at 991, it will go over 1000 if you take the last step.

<p> <label for="amount">Maximum price:</label> <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /> </p> <div id="slider-range-min"></div> $("#slider-range-min").slider({ range: "min", value: 1000, min: 1, step: 10, max: 1000, slide: function (event, ui) { $("#amount").val("$" + ui.value); } }); $("#amount").val("$" + $("#slider-range-min").slider("value")); 

http://jsfiddle.net/zwTnY/

Answer 1

Change the range from 1-1000 to 0-1000 and add a check when sliding or stopping to find out if the value is equal. If so, change it to 1.

JsFiddle example

 $("#slider-range-min").slider({ range: "min", value: 500, min: 0, step: 10, max: 1000, slide: function (event, ui) { $("#amount").val("$" + ui.value); if (ui.value == 0) { $("#slider-range-min").slider('value', 1); $("#amount").val('$1'); } }, stop: function (event, ui) { if (ui.value == 0) { $("#slider-range-min").slider('value', 1); $("#amount").val('$1'); } } }); $("#amount").val("$" + $("#slider-range-min").slider("value"));