Search code examples
javascriptjqueryjquery-uisliderjquery-ui-slider

Stopping the jQuery UI slider from moving past a given value?

On my page I have several sliders. They all need the same scale, but some of them go to 150, and some go to 200. I would like to set the max of them all to 200, but prevent some of them from moving passed 150. They are different $().slider() calls, so I'm simply interested in how to set the max of a slider to 200, but not allow any movement past 150...

I would think that this kind of behavior would be built-in, but apparently not?

FYI: I am using range: "min" for these sliders.

EDIT

http://jsfiddle.net/D9nAx/1/

Solution

  • use slide event:

    $( "#slider-vertical" ).slider({
    orientation: "vertical",
    range: "min",
    min: 0,
    max: 200,
    value: 60,
    slide: function( event, ui ) {
        if(ui.value> 150)
            return false;
        $( "#amount" ).val( ui.value );
    }
});

    fiddle : http://jsfiddle.net/dvz8E