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