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/