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

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

我想做什么：

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

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

到目前为止我拥有的：

在研究了许多滑块之后，我决定使用JQuery UI滑块，并最终发现了这篇文章，它让我开始实现我的目标：

我将代码改为（1）使用一个隐藏的输入字段来检索总的最大值；（2） 用当前值填充输入文本字段而不是范围；（3） 从max=属性设置单个滑块的初始max值；（4） 将滑块设置为disabled（禁用）：如果初始最大值为0，则为true；和（5）侦听文本框的更改，如果不超过最大值，则根据输入的数字移动滑块

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

（滑块#1初始最大值为0-禁用//其他滑块的最大值为500//总表最大值为1000）

滑块的正确操作：

它调整得很好，并且正确地保持在总最大限制之下

正确设置初始单个最大值和总最大值

当最大值为0时，设置并保持禁用状态

在更改文本框时正确滑动

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

更改滑块往往会更改单个滑块的最大值=总最大值

更改文本框可正确滑动当前栏，但不会更新其他滑块以防止其超过最大值

我目前正在文本框上使用.focusout（）事件，因为.change（）会使它变得疯狂b/c滑块也在更改文本框

让我知道你的想法

更新：

---

我很难过没有听到任何回应，但我想我已经破解了它。需要限制原始代码的可靠性，主要是重写。我将提交我的解决方案作为下面的答案。请尝试一下，让我知道你的想法。这是一个相当复杂的过程，所以希望有人会发现这很有用：）

JSFiddle:

Javascript/Jquery:

var sliders=$（“#sliders.slider”）；
滑块。每个（函数（）{
var max=document.getElementById（“sliderMax”）.value；
var值=数字（$（this）.text（），10），
可用总量=最大值；
$（this）.empty（）滑块({
值：0，
分:0,，
max:$（this.sibbines（）.attr（“max”），
射程：“最大”，
步骤：1，
动画：100，
禁用：（功能（curMax）{
如果（curMax<1）{
返回1；
}
返回0；
})（$（this.sibbines（）.attr（“max”）），
停止：功能（事件、用户界面）{
//将文本框更新为当前值并调用.change（）
$（this.this（）.attr（“value”，ui.value）；
$（this.sibbines（）.trigger（'change'）；
}
});
});
$（“.value”）.change（函数（）{
var thisAmount=数字（$（this）.prop（“值”）；
var totalMax=Number（document.getElementById（“sliderMax”）.value）；
var indMin=Number（$（this）.attr（“min”）；
var indMax=Number（$（this）.attr（“max”）；
var合计=0；
//获取所有其他文本框的值
$（'.value'）。不是（this）。每个（函数（）{
总数+=数字（$（此）.prop（“值”）；
});
//从我们的总滑块中找到剩余的最大值
剩余var=totalMax-总计；
如果（剩余<0）{
剩余=0；
}
//如果我们低于最低要求，就去做！否则，就减少数量。
如果（thisAmount>=indMin&&thisAmount<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');    
    }
});

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