jQuery No-Ui-Slider，如何鎖定多個互連滑塊總是總計100？

Question

我在一些可能有3,4或5個滑塊的頁面中使用NoUiSlider（http://refreshless.com/nouislider/）。

我需要設置滑塊的總數值限制爲100，這樣如果我提高滑塊的值，其他值應該降低一點，反之亦然，但我真的不知道怎麼做。

任何人都可以幫助我嗎？謝謝！

jQuery代碼：

$(".slider.tied").each(function() { 
    var context = $(this).addClass("noUiSlider"); 
    var input = context.prev(".amount"); // the input containing the actual slider value 
    var val = input.val(); 
    var min = input.data("min"); 
    var max = input.data("max"); 

    context.noUiSlider({ 
     range: [min, max], 
     start: val, 
     step: 1, 
     handles: 1, 
     slide: function() { 
      var value = $(this).val(); 
      input.val(value); 
     } 
    }); 
}); 

Answer 1

一種可能的解決方案：

var init = true; 
var elements = $(".multislider").children(".slider.tied").length; 
var MAX = 100; 
var initValue = (MAX/elements) >> 0; 
var InitMod = MAX % elements; 

$(".slider.tied").each(function() { 
    var slidersTied = $(".slider.tied"); 
    var context = $(this); 

    var input = context.prev(".amount"); 
    var val = input.data('answer'); 
    var min = input.data('min'); 
    var max = input.data('max'); 
    var range = 1; 
    var proceed = false; 

    $(this).empty().slider({ 
     value: val, 
     min: min, 
     max: max, 
     range: range, 
     animate: "slow", 
     create: function(event, ui){ 

      if (InitMod > 0) { 
       $(this).slider('value', initValue + 1); 
       $(this).prev('.amount').val(initValue + 1); 
       InitMod = InitMod - 1; 
      } 
      else 
      { 
       $(this).slider('value', initValue); 
       $(this).prev('.amount').val(initValue); 
      } 

     }, 
     slide: function(e, ui) { 

      // Update display to current value 
      $(this).prev('.amount').val(ui.value); 

      var current = ($(this).index()/2) >> 0; 
      var total = 0; 
      var counter = 0 

      slidersTied.not(this).each(function() { 

       total += $(this).slider("option", "value");     
       counter += 1; 
      }); 

      total += ui.value; 

      if (total != MAX){ 
       proceed = true; 
      } 

      var missing = MAX - total; 
      console.log("missing: " + missing); 

      counter = 0; 

      if(proceed) { 

       //load elements array 
       var elements = []; 

       slidersTied.each(function() { 
        elements[counter] = $(this); 
        counter += 1; 
       }); 

       var endIndex = counter - 1; 
       counter = endIndex + 1; 

       while (missing != 0) { 

        console.log("current counter: " + counter); 
        do { 
         if (counter == 0) 
         { 
          counter = endIndex; 
         } 
         else 
         { 
          counter = counter - 1; 
         } 
        } while(counter == current) 

        console.log("elemento attuale: " + counter); 

        var value = elements[counter].slider("option", "value"); 
        var result = value + missing; 

        if (result >= 0) 
        { 
         elements[counter].slider('value', result); 
         elements[counter].prev('.amount').val(result); 

         missing = 0;  
        } 
        else 
        { 
         missing = result; 
         elements[counter].slider('value', 0); 
         elements[counter].prev('.amount').val(0); 
        } 

       } 

      } 

     } 
    }); 
}); 

這裏的一個小提琴：

http://jsfiddle.net/vuQz5/11/

取MAX變量的值設定爲所希望的值的護理（所有滑塊的值總和......