Ni una sola de estas respuestas fue la más mínima efectiva para cambiar controles deslizantes en relación entre sí de cualquier manera efectiva ... la mayoría de ellos abandonaron uno o más de los cálculos o no respetaba el límite general, necesitaba algo para permitir que un usuario recogiera sus fichas en un juego HTML5, así que se me ocurrió esto si alguien más tiene un problema similar ... si no es necesario que lo vincules con algo así como cambiar las fichas de apuestas, luego simplemente sacar la opción de detención o cambiarla para adaptarla a sus necesidades
<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>
¡Eso es increíble, muchas gracias! – Marko