多个jquery-ui滑块，设置范围限制

我试图在页面上设置多组jquery-ui滑块。每个组将被配置为具有设定的范围限制。下面的代码（从Combined total for multiple jQuery-UI Sliders找到）按照预期工作，如果页面上有一组滑块。多个jquery-ui滑块，设置范围限制

当单个页面上有多组滑块时会出现问题。当存在多个滑块时，第二组将显示为遵循极限规则以及来自第一组的最后一个选定滑块。第一组似乎没有遵循其滑块组的任何限制。

脚本代码如下：

var uls = document.getElementsByTagName('ul'); 
for(var i=0;i<uls.length;i++){ 
if(uls[i].id.indexOf('sliders')==0){ 

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

var size = 1000; 
var size_step = 100; 

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

$(this).empty().slider({ 
    value: 0, 
    min: 0, 
    max: size, 
    range: "max", 
    step: size_step, 
    animate: 100, 
    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); 
    }); 
    } 
}); 
}); 
} 
}

页代码如下：

Slider 1 
<ul id="sliders0"> 
<li> 
    <div class="slider"></div> 
    <span class="value">0</span> 
</li> 
<li> 
    <div class="slider"></div> 
    <span class="value">0</span> 
</li> 
</ul> 
<br><br> 
Slider 2 
<ul id="sliders1"> 
<li> 
    <div class="slider"></div> 
    <span class="value">0</span> 
</li> 
<li> 
    <div class="slider"></div> 
    <span class="value">0</span> 
</li> 
<li> 
    <div class="slider"></div> 
    <span class="value">0</span> 
</li> 
</ul>

我已经安装的我的代码的jsfiddle并在两组滑块的例子：

http://jsfiddle.net/Y5ZLL/1640/

来源

2015-02-09 Joseph Ivan Hayhoe