Combinato totale per più cursori jQuery-UI

Question

Sto cercando di implementare una pagina in cui ci sono 4 cursori jQuery-UI, e voglio farlo in modo che il totale combinato di tutti e 4 i cursori non andrà mai oltre 400.

Non mi interessa in che modo viene implementato, può iniziare da 0, e non appena si cambia 1 cursore, il totale disponibile rimanente diminuisce o l'impostazione di un cursore oltre il massimo, diminuisce i valori sugli altri cursori .

P.S. I cursori vanno in incrementi di 10.

Tutte le idee & suggerimenti sono benvenuti e ho impostato un jsFiddle se si desidera testare.

Answer 1

Beh qui ya go:

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); 
      }); 
     } 
    }); 
}); 

Ecco un semplice demo di questo: http://jsfiddle.net/yijiang/Y5ZLL/4/

Answer 2

Realizzata una versione aggiornata della risposta di cui sopra per mostrare le percentuali del 100%. Quindi, mentre regoli un cursore verso l'alto, gli altri due diminuiscono, facendo aumentare la percentuale di ciascun cursore al 100%. Inoltre ha reso facile per impostare i valori iniziali

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

ho trovato quando gli altri cursori (quelli diversi da quello che si sta muovendo) si muovono intorno, è fonte di distrazione. Ho anche modificato il violino di Yi Jiang per ora semplicemente fermarlo quando raggiungi un totale di 400. Se vuoi che lo slider vada più in alto, devi prima abbassarne uno degli altri molto simile a come il primo , ma mantiene il cursore relativo al totale complessivo.

Ciò significa che quando si ha uno slider al 25% e un altro al 50%, appaiono come se fossero 25 e 50 rispettivamente.

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

Non una sola di queste risposte era minimamente efficace per cambiare i cursori in relazione gli uni agli altri in qualsiasi modo efficace ... la maggior parte di loro ha lasciato una o più fuori dei calcoli o non rispettavo il limite generale, avevo bisogno di qualcosa per consentire a un utente di scegliere i propri chip in un gioco HTML5, così mi è venuto in mente questo se qualcun altro ha mai avuto un problema simile ... se non hai bisogno di legarlo a qualcosa di simile a cambiare le fiches di scommesse quindi basta togliere l'opzione stop o modificarla in base alle proprie esigenze

<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>