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

/

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/D9nAx/1/

• javascript
• jquery
• jquery-ui
• slider
• jquery-ui-slider

• 1 Please add the relevant HTML and/or scripts/css to your post so we can improve on top of what you have. In addition if you can create a fidde on jsFiddle that would also alow us to try out different solutions. – Nope Commented Sep 14, 2012 at 18:16
• I'm sure you can use the slider events to control its behaviour. – Musa Commented Sep 14, 2012 at 18:20
• link added: jsfiddle/D9nAx/1 – S16 Commented Sep 14, 2012 at 18:51

2 Answers 2

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/dvz8E

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

http://jsfiddle/D9nAx/2/