Мне нужны все ползунки (в моем случае мне нужно 9), но зависимые ползунки, если общее значение достигло максимального значения, не позволяют ползунам двигаться дальше! .
var maxTotal = 150,
inputs = [].slice.call(document.getElementsByTagName('input')),
getTotal = function() {
var sum = 0;
inputs.forEach(function(input) {
sum += parseInt(input.value, 10);
});
return sum;
},
maxReached = function(e) {
var sum = getTotal(),
target;
if (sum > maxTotal) {
target = e.target;
target.value = target.value - (sum - maxTotal);
// next line is just for demonstrational purposes
document.getElementById('total').innerHTML = getTotal();
e.preventDefault();
return false;
}
// next line is just for demonstrational purposes
document.getElementById('total').innerHTML = getTotal();
return true;
};
inputs.forEach(function(input) {
input.addEventListener('input', maxReached);
});
<input type="range" min="0" max="100" value="0" />
<input type="range" min="0" max="100" value="0" />
<input type="range" min="0" max="100" value="0" />
<div>total: <strong id="total">0</strong>/150</div>
Мне нужно сделать то же самое в Angular 8 машинописи.
Несколько ползунков, если общее количество ползунков соответствует максимальному диапазону, и предотвращение ползунка к двигаться дальше.