Set a limit for minimum value for jQuery UI slider

Question

I have a slider which is ranged from 0 to 80. I want to add a minimum range, so the users can not slider lower than that. for example I want to set a value like 20, and users can not slider lower than this, but the range of the slider is still from 0 to 80.

Here is my slider script:

 $("#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 please guide me by details.

Answer 1

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

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

This is to keep the minimum at 0, but now allow values below 20, which is what I think Siwa is asking for. If you simply want to make the minimum 20, change min: 0 to min: 20.

This could possibly be useful.