多个jQuery-UI滑块的总和

Question

我正在尝试实现一个页面,其中有4个jQuery-UI滑块,我想这样做,所以所有4个滑块的总和将永远不会超过400.

我不介意它实现的方式,它可以从0开始,一旦你改变1个滑块,剩余的可用总数减少或设置滑块超过最大值,减少其他滑块上的值.

PS滑块以10为增量.

我们欢迎所有的想法和建议,如果您想测试,我会设置一个jsFiddle.

Answer 1

那么,你去吧:

var sliders = $("#sliders .slider");

sliders.each(function() {
    var value = parseInt($(this).text(), 10),
        availableTotal = 400;

    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 400,
        range: "max",
        step: 10,
        slide: function(event, ui) {
            // Update display to current value
            $(this).siblings().text(ui.value);

            // Get current total
            var total = 0;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });

            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;

            var max = availableTotal - total;

            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");

                t.slider("option", "max", max + value)
                    .siblings().text(value + '/' + (max + value));
                t.slider('value', value);
            });
        }
    });
});

这是一个简单的演示:http://jsfiddle.net/yijiang/Y5ZLL/4/

Answer 2

制作了上述答案的更新版本,显示百分比为100%.因此,当您向上调整一个滑块时,另外两个滑块会减少,使每个滑块的百分比加起来达到100%.还可以轻松设置初始值

的jsfiddle

var sliders = $("#sliders .slider");
var availableTotal = 100;

sliders.each(function() {
    var init_value = parseInt($(this).text());

    $(this).siblings('.value').text(init_value);

    $(this).empty().slider({
        value: init_value,
        min: 0,
        max: availableTotal,
        range: "max",
        step: 2,
        animate: 0,
        slide: function(event, ui) {

            // Update display to current value
            $(this).siblings('.value').text(ui.value);

            // Get current total
            var total = 0;

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });

            // Need to do this because apparently jQ UI
            // does not update value until this event completes
            total += ui.value;

            var delta = availableTotal - total;

            // Update each slider
            sliders.not(this).each(function() {
                var t = $(this),
                    value = t.slider("option", "value");

                var new_value = value + (delta/2);

                if (new_value < 0 || ui.value == 100) 
                    new_value = 0;
                if (new_value > 100) 
                    new_value = 100;

                t.siblings('.value').text(new_value);
                t.slider('value', new_value);
            });
        }
    });
});

Answer 3

我发现当其他滑块(除了你正在移动的滑块之外)移动时,它会分散注意力.我已经修改了易江小提琴,现在只需要在你达到400时就停止它.如果你想让滑块更高,你首先必须降低其中一个,就像第一个一样,但它保持滑块相对于总体.

这意味着当你有一个25%的滑块和50%的另一个滑块时,它们看起来分别是25和50.

的jsfiddle

var sliders = $("#sliders .slider");

sliders.each(function() {
    var value = parseInt($(this).text(), 10),
        availableTotal = 400;

    $(this).empty().slider({
        value: 0,
        min: 0,
        max: 400,
        range: "max",
        step: 10,
        animate: 100,
        slide: function(event, ui) {

            // Get current total
            var total = 0;    

            sliders.not(this).each(function() {
                total += $(this).slider("option", "value");
            });    


            var max = availableTotal - total;            

            if (max - ui.value >= 0) {
                // Need to do this because apparently jQ UI
                // does not update value until this event completes
                total += ui.value;
                console.log(max-ui.value);
                $(this).siblings().text(ui.value);
            } else {
                return false;
            }
        }
    });
});