JQuery UI Slider - 多个滑块的组合最大值，这些滑块也具有单独的最大值

Question

- 解决了 -
我知道它们存在，但我还没有找到一个可以轻松满足一些非常基本需求的滑块，我相信我不是唯一一个对这个问题感到沮丧的人。这就是我到目前为止所拥有的。我的方向正确吗？

我正在尝试做的事情：

使用 JQuery UI 滑块，我需要页面上有多个滑块。每个滑块的最小值为 0、动态最大值和动态默认值。我在输入字段中设置这些值，其中包含 html 元素 min、max、value 并稍后通过 javascript/jquery 检索它们。

除了它们各自的最大值之外，还需要有一个总最大值，所有滑块的总和不能超过。最后，我还需要更新输入框中的滑块（以及滑块本身）。

我目前所拥有的：

在研究了许多滑块后，我决定使用 JQuery UI 滑块，最终看到这篇文章让我开始实现自己的目标：Combined total for multiple jQuery-UI Sliders

我将代码更改为 (1) 使用隐藏输入字段检索总最大值； (2) 用当前值填充输入文本字段而不是跨度； (3) 从 max= 属性中设置单个滑块的初始最大值； (4) 将滑块设置为禁用：如果初始最大值为 0，则为 true； (5) 监听文本框的变化，如果不超过最大值，根据输入的数字移动滑块。

当前代码（JSFiddle）：（请参阅答案中的 jsfiddle）

(Slider #1 Initial max is 0 - disabled // 其他 Slider 的最大值为 500 // 总表最大值为 1000)

滑块的正确做法：

1. 它可以很好地调整并正确地保持在总最大限制之下
2. 正确设置初始单个最大值和总最大值
3. 当最大值为 0 时设置并保持禁用
4. 更改文本框时正确滑动

我需要什么帮助/关于修复的想法：

1. 更改滑块往往会更改单个滑块的最大值 = 总最大值
2. 更改文本框会正确滑动当前栏，但不会更新其他滑块以防止它们超过总最大值
3. 我目前在文本框上使用 .focusout() 事件，因为 .change() 会导致它发疯，因为滑块也在更改文本框。

让我知道你的想法。

更新：

我很伤心没有听到任何回应，但我想我已经破解了。需要限制该原始代码的可靠性并主要重写。我将在下面提交我的解决方案作为答案。请尝试一下，让我知道你的想法。这是一个相当大的过程，所以希望有人觉得这很有用:)

Answer 1

JSFiddle: http://jsfiddle.net/mikecruz/bAntY/

Javascript / Jquery：

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

sliders.each(function() {
    var max = document.getElementById("sliderMax").value;
    var value = Number($(this).text(), 10),
        availableTotal = max;

    $(this).empty().slider({
        value: 0,
        min: 0,
        max: $(this).siblings().attr("max"),
        range: "max",
        step: 1,
        animate: 100,
        disabled: (function(curMax) {
            if (curMax < 1) {
                return 1;
            }
            return 0;
        })($(this).siblings().attr("max")),
        stop: function(event, ui) {
            // Update text box to current value and call .change()
            $(this).siblings().attr("value", ui.value);
            $(this).siblings().trigger('change');
        }
    });
});

$(".value").change(function() {
    var thisAmount = Number($(this).prop("value"));
    var totalMax = Number(document.getElementById("sliderMax").value);
    var indMin = Number($(this).attr("min"));
    var indMax = Number($(this).attr("max"));
    var total = 0;

    //Get the values of all other text boxes
    $('.value').not(this).each(function() {
        total += Number($(this).prop("value"));
    });

    //Find the remaining from our total sliders max
    var remaining = totalMax - total;

    if(remaining < 0) {
      remaining = 0;   
    }
    //if we are under our minimums, go for it! Otherwise, reduce the number.
    if (thisAmount >= indMin && thisAmount < indMax && thisAmount < totalMax && thisAmount < remaining) {
        $(this).siblings(".slider").slider("option", "value", thisAmount);
        //total += thisAmount;
    }
    else {
        //var setMax = ((indMax + totalMax) - Math.abs(indMax - totalMax)) / 2;
        var setMax = Math.min(indMax, totalMax, remaining);
        $(this).siblings(".slider").slider("option", "value", setMax);
        $(this).prop("value", setMax);
        //total += (thisAmount - setMax);
    }

    //above was getting buggy, so lets just reset total and get it again
    total = 0;
    //Get the values of all text boxes
    $('.value').each(function() {
        total += Number($(this).prop("value"));
    });

    //Find our new remaining number after updating total for this value
    remaining = totalMax - total;
    if(remaining < 0) {
      remaining = 0;  
    }
    //Set each slider to the current point and update their max values.
    $('.value').each(function() {
    var sliderVal = Number($(this).prop("value"));
    var sliderMin = Number($(this).attr("min"));
    var sliderMax = Number($(this).attr("max"));
    var setNewMax = (((sliderMax + totalMax) - Math.abs(sliderMax - totalMax)) / 2);
    var newMax = sliderVal + remaining;

    $(this).prop("max", newMax);        
    if(newMax < setNewMax) {
        $(this).siblings('.slider').slider("option", "max", newMax);
        $(this).siblings('span').text('/' + (newMax));
    }
    else {
        $(this).siblings('.slider').slider("option", "max", setNewMax);
        $(this).siblings('span').text('/' + (setNewMax));
    }
    $(this).siblings(".slider").slider("option", "value", sliderVal);
    });

    $('#sliderTotal').attr("value", total);
});

HTML：
每个滑块都需要一个 li
您可以使用 CSS 来设置不同部分的样式。例如。给 slideBG 一个背景图片。
您可能想要隐藏总计框，当然，您可以编写最大值。

<form>
<ul id="sliders">
    <li>
        <span class="slideBG"><div class="slider"></div>
        <input type="text" class="value" name="slider1" value="0" min="0" max="0"/>
        <span>0</span></span>
    </li>
    <li>
        <span class="slideBG"><div class="slider"></div>
        <input type="text" class="value" name="slider2" value="0" min="0" max="500" />
        <span>0</span></span>
    </li>
    <li>
        <span class="slideBG"><div class="slider"></div>
        <input type="text" class="value" name="slider3" value="0" min="0" max="500" />
        <span>0</span></span>
    </li>
    <li>
        <span class="slideBG"><div class="slider"></div>
        <input type="text" class="value" name="slider4" value="0" min="0" max="500"/>
           <span>0</span></span>
    </li>
    <li>
        <span class="slideBG"><div class="slider"></div>
        <input type="text" class="value" name="slider5" value="0" min="0" max="500"/>
           <span>0</span></span>
    </li>
    <li>
        <span class="slideBG"><div class="slider"></div>
        <input type="text" class="value" name="slider6" value="0" min="0" max="500"/>
           <span>0</span></span>
    </li>
</ul>
    <br><label for="sliderMax">Total Max:</label>
    <input type="text" id="sliderMax" name="sliderMax" value="1000"/>
    <br><br><label for="sliderTotal">Slider Totals:</label>
    <input type="text" id="sliderTotal" name="sliderTotal" value="0" />
</form>

编辑：

如果滑块被禁用，您可能需要添加它以防止人们使用文本框：

$(".slider").each(function() {
    var disabled = Number($(this).slider("option", "disabled"));
    if(disabled == 1) {
        $(this).siblings('.value').attr('disabled', 'disabled');    
    }
});

Answer 2

您好，我刚刚尝试了类似的方法，但以不同的方式实现了它。我有多个滑块，最多一个。所有滑块的值加起来不能超过总和。前任。 3 个滑块，总共 100%。滑块可以是 10%、50%、40%。

这并不能满足您的所有需求，但它可能对寻找类似内容的其他用户有好处。

var sliders = $('.slider');
sliders.each(function(i) {
  var slider = $(sliders[i]);
  var input = $('#' + slider.attr('datanamespace'));
  slider.slider({
    value: slider.attr('datatotal'),
    min: 0,
    max: max,
    step: 1,
    slide: function( event, ui ) {
      if (ui.value < slider.attr('datavalue')) {
        return false;
      }
      var inputs = $('.slideInput');
      var total = ui.value;

      for (var i = 0; i < inputs.length; i++) {
        var inp = $(inputs[i]);
        if (inp.attr('id') != input.attr('id')) {
          total = total + parseInt(inp.val());
        }
      }

      if (total > max) {
        return false;
      }
      input.val(ui.value);
    }
  });
  input.val(slider.slider("value"));
});