停止jQuery UI滑块移动超过给定值?

时间:2012-09-14 18:08:41

标签: javascript jquery jquery-ui slider jquery-ui-slider

在我的页面上,我有几个滑块。它们都需要相同的比例,但是有些比例达到150,有些转到200.我想将它们的最大值设置为200,但是防止它们中的一些移动通过150.它们是不同的$() .slider()调用,所以我只是对如何将滑块的最大值设置为200感兴趣,但不允许任何移动超过150 ......

我认为这种行为会内置,但显然不是吗?

仅供参考:我正在使用范围:“min”用于这些滑块。

修改

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

2 个答案:

答案 0 :(得分:7)

使用幻灯片事件:

$( "#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 );
    }
});

小提琴:http://jsfiddle.net/dvz8E

答案 1 :(得分:2)

$( "#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.net/D9nAx/2/