CODEWITHSUNDEEP
jqueryjquery-ui
Siwa
Siwa

Reputation: 103

Set a limit for minimum value for jQuery UI slider

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.

Upvotes: 6

Views: 5229

Answers (3)

Mike Godin
Mike Godin

Reputation: 3947

I have found that the following slide method pins the lower value to 20 when one tries to slide past 20, rather than keeping the previous value (some number slightly higher than 20).

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

Upvotes: 0

sachleen
sachleen

Reputation: 31141

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.

Upvotes: 14

Johnny_D
Johnny_D

Reputation: 4652

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

But if you want to display whole 100 values and allow user to slide only between 0 and 20, you should bind to change event your method, whick would return slide position to allowed, once user tries to ignore it. Doc page.

Upvotes: 0

Related Questions