将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位置，则滑块不能再走了或50个中的每个。

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

然后我写了

 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>