在某个位置停止 2 个滑块

Question

我有一个严重的问题，我想知道如何解决 javascript 或 jquery 中的问题，所以我有滑块输入 type="range" ，它们都有 100 作为最大值，就像这样：

 <input type="range" min="0" max="100" id="one">
    <input type="range" min="0" max="100" id="two">

所以为了将它们都停止在某个位置，我的意思是，当两个滑块的值都在 100 时，例如：第一个在 30 位置，第二个是 70，滑块不能' t去更多，或者他们每个人都在50。

为了在 javascipt 中进行操作，我获取了第一个滑块的值和第二个滑块的值，并将它们放在一个变量 co2 中 var co2 = 滑块 1 + 滑块 2

然后我写了，

var co2 = slider1+slider2
                  
                  if(co2>=100){
                      
                       document.getElementById("one").disabled()=true;
                       document.getElementById("two").disabled()=true;
                      
                    }

它可以完全停止 2 个滑块，对我来说，我只想不要让它们超过 100 的值，而不是停止它们

Answer 1

看来这就是你想要的。

var elOne = document.getElementById("one"),
  elTwo = document.getElementById("two"),
  res = document.getElementById("result");

var result = 0;

elOne.addEventListener("input", function() {
  showResult("one");
}, false);

elTwo.addEventListener("input", function() {
  showResult("two");
}, false);

function showResult(slider) {
  result = parseInt(elOne.value) + parseInt(elTwo.value);
  if (result >= 100) {
    if (slider === "one")
      elOne.value = 100 - parseInt(elTwo.value);
    else
      elTwo.value = 100 - parseInt(elOne.value);

  }
  res.innerHTML = parseInt(elOne.value) + parseInt(elTwo.value);
}

#result {
    font-size: 2em;
}

<div style="margin-top: 1em">
  <h2>Total</h2>
  0 <input type="range" min="0" max="100" id="one">100 0
  <input type="range" min="0" max="100" id="two">100
</div>

<p id="result"></p>