Друзья !!! Несколько дней уже пытаюсь победить эту проблему ,но ни что не помогает ! У меня есть главный инпут с основным значением . Мне надо с помощью трех ползунков range равномерно распределить это значение по инпутам рядом с ползунками. Соответственно при изменении ползунком основное число должно уменьшаться ! ВСЕ ЗНАЧЕНИЯ ДОЛЖНЫ БЫТЬ ЦЕЛЫМИ ЧИСЛАМИ ! И STEP у range должен быть равен 10
var mainInput = document.getElementById('mainInput');
var firstRange = document.getElementById('firstRange');
var secondRange = document.getElementById('secondRange');
var thirdRange = document.getElementById('thirdRange');
var out1 = document.getElementById('out1');
var out2 = document.getElementById('out2');
var out3 = document.getElementById('out3');
var getFirstValue = function() {
out1.value = this.value;
mainInput.value = out1.value;
var leftValue = 100 - mainInput.value;
out2.value = out3.value = leftValue / 2;
}
var getSecondValue = function() {
out2.value = this.value;
mainInput.value = out2.value;
var leftValue2 = 100 - mainInput.value;
out1.value = out3.value = leftValue2 / 2;
}
var getThirdValue = function() {
out3.value = this.value;
mainInput.value = out3.value;
var leftValue2 = 100 - mainInput.value;
out1.value = out3.value = leftValue3 / 2;
}
firstRange.oninput = getFirstValue;
secondRange.oninput = getSecondValue;
thirdRange.oninput = getThirdValue;
<h1>Распределитель</h1>
<label for="mainInput">Осталось распределить</label>
<input type="text" value="0" min="0" max="100" id="mainInput"><br>
<p><input type="range" id="firstRange"><input type="text" id="out1"></p>
<p><input type="range" id="secondRange"><input type="text" id="out2"></p>
<p><input type="range" id="thirdRange"><input type="text" id="out3"></p>