Set a limit for the minimum value for jQuery UI slider

Question

I have a slider that ranges from 0 to 80. I want to add a minimum range so that users cannot slider below this. for example, I want to set the value to 20, and users cannot slide below this, but the range of the slider is still from 0 to 80.

Here is my script slider:

$("#showslider").keyup(function (e){ $(".slider").slider("value", $("#showslider").val()); $("#slider-result").html($("#showslider").val()); $( ".slider" ).slider({ animate: true, range: "min", value: 50, min: 0, max: 80, step: 1, slide: function (event, ui) { $("#slider-result").html(ui.value); $("#showslider").val(ui.value); }, change: function(event, ui) { $('#hidden').attr('value', ui.value); } }); 

If you can guide me in detail.

Answer 1

In the slide function, you can check the value of the slider to see if it is within the range that you want.

 if (ui.value < 20) // corrected return false; 

This means that the minimum minimum is 0, but now let's say values ​​are lower than 20, which, as I think, asks Siva. If you just want to make a minimum of 20, change min: 0 to min: 20 .

This may be helpful.

Answer 2

Change the max property in your code to 20. Example .

But if you want to display as many as 100 values ​​and allow the user to move only between 0 and 20, you must bind your method to the change event, whick will return the position of the slide to enable it as soon as the user tries to ignore it. Doc page .

Answer 3

I found that the following slide method pushes the bottom value to 20 when you try to slide past 20, instead of saving the previous value (some number is a little higher than 20).

 slide: function (event, ui) { if (ui.value < 20) { $(this).slider('value',20); return false; } },