jQuery UI 组合滑块百分比 [英] jQuery UI combined slider percentage

问题描述

我已经采用了这个例子，并在上面添加了 5 个滑块.

I have taken this example and added 5 sliders on it.

示例:http://jsfiddle.net/redsunsoft/caPAb/2/
我的例子:http://jsfiddle.net/9azJG/

    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);
                });
            }
        });
    });

当存在五个滑块时，每次拖动滑块时，jQuery 滑块都会以一种奇怪的方式做出反应.似乎目标滑块的值在每一步都变为零并返回到原始值.

When there are five sliders present, the jQuery sliders react in a weird way each time the sliders are dragged. It seems like the value for the target sliders goes to zero and back to the original value on each step.

有谁知道是什么导致了这个问题?我一直在寻找几个小时没有任何想法.

Would anyone know what causes this issue? I have been searching for hours without any idea.

推荐答案

delta/n where n = { 主滑块下的滑块数 }

delta/n where n = { number of sliders that are under the main slider }

var new_value = value + (delta/4);

演示

这篇关于jQuery UI 组合滑块百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！