多个jQuery-UI滑块组合总数

Question

我试图实现一个页面，其中有4个jQuery-UI滑块，并且我想使它成为所有4个滑块的组合总数将永远不会超过400.

我不介意这种实现方式，它可以从0开始，并且只要您更改1个滑块，剩余的可用总数就会减少，或者将滑块设置为超过最大值，减少其他滑块上的值。

P.S.滑块以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游戏中选择他们的芯片，所以如果其他人有类似的问题，我想出了这个...如果你不需要把它绑定到像改变投注筹码然后只是取消停止选项或改变它以满足您的需求

<div id="chip_holder" style="float:right;margin-right:20px;"> 
    <ul id="sliders"> 
    <?php 
    $chips = array("1" => 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; 
     ?> 
     <li style="display:inline-block;"> 
       <input type="number" style="display:none;" id="hidden_value_<?php echo $key; ?>" value="<?php echo floor($value); ?>" min="0" max="<?php echo $my_points; ?>" step="<?php echo $chips[$key][2]; ?>" /> 
       <span id="slide_<?php echo $key; ?>" title="<?php echo $key; ?>" class="chip_slider" alt="<?php echo $key/$my_points; ?>"></span> 
       <span id="chip_label_<?php echo $key; ?>" title="<?php echo $key; ?>" class="chip_label"><?php echo $value; ?></span> 
     </li> 
    <?php 
     $t++; 
     } 
     if($totalc < $my_points){ 
     $min = min(array_keys($chips)); 
     $remainder = floor(($my_points - $totalc)/$chips[$min][2]); 
    ?> 
     <script> 

      $('#hidden_value_<?php echo $min; ?>').val(parseInt($('#hidden_value_<?php echo $min; ?>').val()) + parseInt(<?php echo $remainder; ?>)); 
      $('#chip_label_<?php echo $min; ?>').text(parseInt($('#hidden_value_<?php echo $min; ?>').val())); 
     </script> 
     <?php } ?> 
      <li id="checkout_button" onclick="javascript: checkout_now();"><?php echo CASHOUT; ?></li> 

     </ul> 
     <ul id="chips_stay_put"> 
     <?php 
      $t = 0; 
      foreach($chips as $key => $value){ 
      ?> 
       <li class="chip_holder" style="width:70px;"> 
        <span id="chip_holder_<?php echo $key; ?>" class="<?php echo $value[0]; ?>" alt="<?php echo $key; ?>"></span> 
      </li> 
       <?php 
      $t++; 
      } 
     ?> 
     </ul> 
     </div> 
<script> 
function drop_chips(id, chips){ 

$('.chip_label').each(function(){ 

     id =$(this).attr('id'); 
     idx =$('#' + id).attr('title'); 
    chips = parseInt($('#chip_label_' + idx).text()); 
    cls = $('#chip_holder_' + idx).attr('class'); 

    $('#chip_holder_' + idx).html(''); 

    m = minMaxTitle($('.chip.' + cls)); 

    if(m>0){ 
     start = 0; 
    }else{ 
     start = m; 
    } 
    htmlH = ''; 

     while(m<=chips){ 
     start= start + m; 
      zIndex = parseInt(start) + parseInt(100); 

      htmlH += '<span id="chip_' + idx + '_' + m + '" class="chip ' + cls + '" style="position:absolute;top:-'+ (m * 3) + 'px;z-index:' + zIndex + ';" alt="' + cls + '" title="' +m+ '">' + idx + '</span>'; 

      m++; 

    } 

    $('#chip_holder_' + idx).html(htmlH); 


     $('.chip').draggable({ 
      drag: function(event, ui) { 
       var snapTolerance = $(this).draggable('option', 'snapTolerance'); 
       var topRemainder = ui.position.top % 20; 
       var leftRemainder = ui.position.left % 20; 

       if (topRemainder <= snapTolerance) { 
       ui.position.top = ui.position.top - topRemainder; 
       } 

       if (leftRemainder <= snapTolerance) { 
       ui.position.left = ui.position.left - leftRemainder; 
       } 
      } , 

      revert : function(event, ui) { 
       // on older version of jQuery use "draggable" 
        // $(this).data("draggable") 
        // on 2.x versions of jQuery use "ui-draggable" 
        // $(this).data("ui-draggable") 
        $(this).data("uiDraggable").originalPosition = { 
        top : 0, 
        left : 0 
        }; 
        // return boolean 
        return !event; 
        // that evaluate like this: 
        // return event !== false ? false : true; 
       } 

     }); 
    }); 

} 
var sliders = $("#sliders .chip_slider"); 

sliders.each(function() { 
    var slider_id; 
    var value = parseInt($(this).text(), 10), 
     availableTotal = parseInt($('#my_points_hidden').val()); 

    $(this).empty().slider({ 
     value: parseInt($('#' + $(this).attr('id')).prev('input').val()), 
     min: 0, 
     max: parseInt($('#' + $(this).attr('id')).prev('input').attr('max')), 
     range:parseInt($('#' + $(this).attr('id')).prev('input').attr('max')), 
     orientation:"vertical", 
     step: 1, 
     animate: 100, 
     stop: function(event, ui) { drop_chips() }, 
     slide: function(event, ui) { 

     // Update display to current value 
      $(this).siblings('.value').text(ui.value); 

      // Get current total 
      var total = 0; 

     var slider_id = $(this).attr('title'); 

      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); 
       id = $(this).attr('id'); 

       title = $('#' + id).attr('title'); 
       initial_slider = total - new_value; 
       console.log(slider_id); 
     $('#chip_label_' + slider_id).text(parseInt(parseInt(ui.value)/parseInt($('#hidden_value_' + slider_id).attr('step')))); 
       $('#chip_label_' + title).text(parseInt(parseInt(new_value)/parseInt($('#hidden_value_' + title).attr('step')))); 
       }); 

     } 

    }); 
}); 

</script>