Ползунок остановки диапазона после достижения максимального предела HTML Ползунок типа ввода ANGULAR 8 - PullRequest
1 голос
/ 14 февраля 2020

Мне нужны все ползунки (в моем случае мне нужно 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 машинописи.

Несколько ползунков, если общее количество ползунков соответствует максимальному диапазону, и предотвращение ползунка к двигаться дальше.

...