jQuery Ui滑块 - 限制范围

Question

使用jQuery UI，我想使用2个单独的滑块，两个滑块的范围都是0到100（不是一个带有2个手柄的滑块）。

当第一个滑块移动到'40'时，我希望在滑块上放置一个限制，以便第二个滑块只能移动到最大值'60'，即它不能移过60 - 即两个滑块的总限制为100。

这可能吗？

Answer 1

如果您的滑块的总价值超过100，您可以捕获slide事件并取消它（return false）：

$('.slider').slider({
    min: 0,
    max: 100,
    slide: function (ev, ui) {
        var total = ui.value;
        $('.slider').not(this).each(function () {
            total += $(this).slider('value');
        })
        if (total > 100) {
            return false;
        }
        $('#total').text(total);
    }
});

演示http://jsfiddle.net/alnitak/zFYjW/4/