Question

我正在尝试在页面上设置多组jquery-ui滑块。每个组都要配置为具有设置范围限制。如果页面上有一组滑块，则下面的代码（从Combined total for multiple jQuery-UI Sliders中找到）可以正常工作。

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

下面的脚本代码：

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/

Answer 1

我几天前制作了这个插件。它支持多组组： https://github.com/jhovgaard/jquery.rangegroup

多个jquery-ui滑块，具有设定的范围限制

1 个答案: