Javascript jQuery没有Ui滑块，如何将多个相互连接的滑块锁定为始终总和100？

我在一些可能有3、4或5个滑块的页面中使用NoUiSlider（）

我需要将滑块的总值设置为100，这样如果我提高滑块的值，其他滑块的值应该会降低一点，反之亦然，但我真的不知道怎么做

有人能帮我吗？谢谢

jQuery代码：

$(".slider.tied").each(function() {
    var context = $(this).addClass("noUiSlider");
    var input = context.prev(".amount"); // the input containing the actual slider value
    var val = input.val();
    var min = input.data("min");
    var max = input.data("max");

    context.noUiSlider({
        range: [min, max],
        start: val,
        step: 1,
        handles: 1,
        slide: function() {
            var value = $(this).val();
            input.val(value);
        }
    });
});

一种可能的解决办法：

var init = true;
var elements = $(".multislider").children(".slider.tied").length;
var MAX = 100;
var initValue = (MAX / elements) >> 0;
var InitMod = MAX % elements;

$(".slider.tied").each(function() {
    var slidersTied = $(".slider.tied");
    var context = $(this);

    var input = context.prev(".amount");
    var val = input.data('answer');
    var min = input.data('min');
    var max = input.data('max');
    var range = 1;
    var proceed = false;

    $(this).empty().slider({
        value: val,
        min: min,
        max: max,
        range: range,
        animate: "slow",
        create: function(event, ui){

            if (InitMod > 0) {
                $(this).slider('value', initValue + 1);
                $(this).prev('.amount').val(initValue + 1);
                InitMod = InitMod - 1;
            }
            else
            {
                $(this).slider('value', initValue);
                $(this).prev('.amount').val(initValue);
            }

        },
        slide: function(e, ui) {

            // Update display to current value
            $(this).prev('.amount').val(ui.value);

            var current = ($(this).index() / 2) >> 0;
            var total = 0;
            var counter = 0

            slidersTied.not(this).each(function() {

                total += $(this).slider("option", "value");                
                counter += 1;
            });

            total += ui.value;

            if (total != MAX){
                proceed = true;
            }

            var missing = MAX - total;
            console.log("missing: " + missing);

            counter = 0;

            if(proceed) {

                //load elements array
                var elements = [];

                slidersTied.each(function() {
                    elements[counter] = $(this);
                    counter += 1;
                });

                var endIndex = counter - 1;
                counter = endIndex + 1;

                while (missing != 0) {

                    console.log("current counter: " + counter);
                    do {
                        if (counter == 0) 
                        {
                            counter = endIndex;
                        }
                        else
                        {
                            counter = counter - 1;
                        }
                    } while(counter == current)

                    console.log("elemento attuale: " + counter);

                    var value = elements[counter].slider("option", "value");
                    var result = value + missing;

                    if (result >= 0) 
                    {
                        elements[counter].slider('value', result);
                        elements[counter].prev('.amount').val(result);

                        missing = 0;    
                    }
                    else
                    {
                        missing = result;
                        elements[counter].slider('value', 0);
                        elements[counter].prev('.amount').val(0);
                    }

                }

            }

        }
    });
});

这是一把小提琴：

---

注意将MAX variable的值设置为所需的值（所有滑块值的总和…

我甚至尝试使用jQuery UI滑块，因为有人试图做一些与我需要的类似的事情，但仍然没有成功：这里我面临两个问题：1）可能有一个小于100%的和，2）有时总和更大。我只需要有一个100%，始终…你能解释更多的“其他人应该降低一点，反之亦然”我认为问题不在于用户界面，而是更多的“同步”逻辑？如果你有10个滑块，如果其中一个被降下-它会如何影响其他滑块？必须定义某些比率。。。。这正是我要找的！非常感谢。