多个jQuery-UI滑块的总计

我正在尝试实现一个页面，其中有4个jQuery-UI滑块，我想这样做，所以所有4个滑块的总和将永远不会超过400。

我不介意这是实现的方式，它可以从0开始，一旦你更改1个滑块，剩余的可用总数减少或设置滑块超过最大值，减少其他滑块上的值。

PS滑块以10为增量。

我们欢迎所有的想法和建议，如果您想测试，我会设置一个jsFiddle 。

Answer 1

那么你去吧：

var sliders = $("#sliders .slider"); sliders.each(function() { var value = parseInt($(this).text(), 10), availableTotal = 400; $(this).empty().slider({ value: 0, min: 0, max: 400, range: "max", step: 10, 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); }); } }); }); 

这是一个简单的演示： http ： //jsfiddle.net/yijiang/Y5ZLL/4/

Answer 2

制作了上述答案的更新版本，显示百分比为100％。 因此，当您向上调整一个滑块时，另外两个滑块会减少，使每个滑块的百分比加起来达到100％。 还可以轻松设置初始值

的jsfiddle

 var sliders = $("#sliders .slider"); var availableTotal = 100; sliders.each(function() { var init_value = parseInt($(this).text()); $(this).siblings('.value').text(init_value); $(this).empty().slider({ value: init_value, min: 0, max: availableTotal, range: "max", step: 2, animate: 0, slide: function(event, ui) { // Update display to current value $(this).siblings('.value').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 delta = availableTotal - total; // Update each slider sliders.not(this).each(function() { var t = $(this), value = t.slider("option", "value"); var new_value = value + (delta/2); if (new_value < 0 || ui.value == 100) new_value = 0; if (new_value > 100) new_value = 100; t.siblings('.value').text(new_value); t.slider('value', new_value); }); } }); }); 

Answer 3

我发现当其他滑块（除了你正在移动的滑块之外）移动时，它会分散注意力。 我也修改了易江小提琴，现在只要它达到400就停止。如果你想让滑块更高，你首先必须降低其中一个，就像第一个那样，但它保持滑块相对于总体。

这意味着当你有一个25％的滑块和50％的另一个滑块时，它们看起来分别是25和50。

的jsfiddle

 var sliders = $("#sliders .slider"); sliders.each(function() { var value = parseInt($(this).text(), 10), availableTotal = 400; $(this).empty().slider({ value: 0, min: 0, max: 400, range: "max", step: 10, animate: 100, slide: function(event, ui) { // Get current total var total = 0; sliders.not(this).each(function() { total += $(this).slider("option", "value"); }); var max = availableTotal - total; if (max - ui.value >= 0) { // Need to do this because apparently jQ UI // does not update value until this event completes total += ui.value; console.log(max-ui.value); $(this).siblings().text(ui.value); } else { return false; } } }); }); 

Answer 4

这些答案中没有一个对于以任何有效的方式改变相互之间的滑块是最有效的…大多数人在计算中留下一个或多个或者不尊重总体限制，我需要一些东西允许用户在HTML5游戏中挑选他们的筹码，所以如果其他人有类似的问题，我想出了这个…如果你不需要将它与改变投注筹码这样的东西联系起来那么就拿出停止选项或改变它以满足您的需求

  
 
  array("blue", "1 Point", "1"), "5" => array("red", "5 Points", "5"), "10" => array("gold", "10 Points", "10")); $t = 0; $value_per_row = floor($my_points / count($chips)); $totalc = 0; foreach($chips as $key => $value){ $value = floor($value_per_row / $value[2]); $totalc = $totalc + $value_per_row; ?> 
    
    
 
 
  $value){ ?>