最大限制达到本地HTML输入类型滑块后的停止范围滑块ANGULAR 8

Question

我需要所有滑块（在我的情况下，我需要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打字稿中做同样的事情。

如果所有滑块的总数满足最大范围，则使用多个滑块，然后阻止滑块进一步移动。

Answer 1

即使我需要相同的逻辑，我也在jquery中找到了此解决方案。[jQuery解决方案]

[1]：http://jsfiddle.net/8jddyftenter code herec /