阻止 jQuery UI 滑块移动超过给定值？答案

【问题标题】：Stopping the jQuery UI slider from moving past a given value?阻止 jQuery UI 滑块移动超过给定值？
【发布时间】：2012-09-14 18:08:40
【问题描述】：

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

我认为这种行为是内置的，但显然不是？

仅供参考：我对这些滑块使用 range: "min"。

编辑

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

【问题讨论】：

请将相关的 HTML 和/或脚本/css 添加到您的帖子中，以便我们在您拥有的基础上进行改进。此外，如果您可以在 jsFiddle.net 上创建一个 fidde，也可以让我们尝试不同的解决方案。
我相信你可以使用滑块事件来控制它的行为。
已添加链接：jsfiddle.net/D9nAx/1

标签： javascript jquery jquery-ui slider jquery-ui-slider

【解决方案1】：

使用幻灯片事件：

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

【讨论】：

这不好，有时如果你快速移动鼠标，它会停在说 147。需要$(this).slider( "value" , 150 ); 在>150 条件内。
@Grantunwin 我无法在此处重现该行为...您使用的是什么浏览器？
我使用的是 FireFox 15.0.1。如果你快速向上移动滑块，就可以了。
这正是我所需要的。在 FireFox 等中运行良好。

【解决方案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/

【讨论】：

这几乎是完美的。唯一的问题是，如果你向上滑动太快，滑块不会最大化。如果我希望最大值为 150，它将停止在 147 左右。如果 .slider("value") 大于 150...，有什么方法可以将滑块的值设置为 150...？
@Greg-J 它在所有最新的浏览器中都非常适合我，你使用的是什么浏览器？
我一定是复制了旧版本，因为这不是您最初发布的版本...现在很好用。谢谢！