最大値は異なりますが、同じ容量を共有する 3 つの input type='range' フィールドがあります。この容量は、3 つの入力のいずれかが変化するたびに減少します。容量が0に達すると、入力フィールドが右に移動するのを防ぎ(値が増加するのを防ぎ)、左に移動するだけになるはずですが、JSとjQueryを使用してそれを行う方法がわかりません
ここに入力用のhtmlがあります
<input type="range" class="slider" id="woodSlider" min="0" value="0" max="1558">
<input type="range" class="slider" id="ironSlider" min="0" value="0" max="2555">
<input type="range" class="slider" id="stoneSlider" min="0" value="0" max="2451">
容量を減らすコードは次のとおりです。
$("input").change(function() {
$("#capacityLeft").html(parseInt(holding.capacity) -
$("#woodSlider").val() -
$("#ironSlider").val() -
$("#stoneSlider").val());
if(parseInt($("#capacityLeft").html()) <= 0) {
// TODO: FIND OUT HOW TO STOP THE SLIDERS FROM MOVING
}
});