多个滑块相互反应

Question

新手来了我正在制作我的第一个项目，我想为不同的人（普通人、工人、农民等）设置滑块，但我不知道如何放置多个滑块以及如何让所有滑块都工作。 我从 W3schools 获取了代码并更改了一些内容，但似乎我已经破坏了它，我不知道该怎么处理它。 我想让 2 个滑块同时工作，并且当一个滑块上升而另一个滑块下降时（指派人们从事他们的工作）。 这是我的代码（我不知道它是否有帮助）

 var people = 100; var workers = 0; document.onreadystatechange = function () { if (document.readyState == "complete") { var slider = document.getElementById("sliderWorkers"); var output = document.getElementById("workers").innerHTML = workers; output.innerHTML = workers; slider.oninput = function () { output.innerHTML = this.value; } /*################################################################*/ var slider2 = document.getElementById("sliderPeople"); var output = document.getElementById("people").innerHTML = people; output.innerHTML = slider.value; slider.oninput = function () { output.innerHTML = this.value; } } } setInterval(function () { document.getElementById("people").innerHTML = people; document.getElementById("workers").innerHTML = workers; }, 100000);

 .slider, .slider2 { -webkit-appearance: none; width: 10%; height: 7px; border-radius: 5px; background: #d3d3d3; outline: none; -webkit-transition: .2s; transition: opacity .2s; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: black; cursor: pointer; } .slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: black; cursor: pointer; } .slider2::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: black; cursor: pointer; } .slider2::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: black; cursor: pointer; }

 <h1>Population range slider</h1> <div class="slidecontainer"> <input type="range" min="0" max="100" value="0" class="slider" id="sliderWorkers"> <p>Value wokers: <div id="workers"></div> </p> </div> <div class="slidecontainer"> <input type="range" min="0" max="100" value="100" class="slider2" id="sliderPeople"> <p>Value people: <div id="people"></div> </p> </div>

Answer 1

您可以使用DOMContentLoaded和addEventListener以便在 dom 准备好时开始您的任务。

在您querySelectorAll以选择所有范围元素之后，并且对于每个元素都需要一个事件处理程序。

在此事件处理程序中，您可以更新值。

注意：P + DIV 现在是带有 SPAN 的 P。

 document.addEventListener('DOMContentLoaded', function(e) { document.querySelectorAll('[type="range"]').forEach(function (ele) { ele.addEventListener('input', function (e) { this.parentElement.querySelector('span').textContent = this.value; var next = this.closest('div').nextElementSibling; if (next.tagName != 'DIV') { next = this.closest('div').previousElementSibling; } next.querySelector('[type="range"]').value = 100 - +this.value; next.querySelector('span').textContent = 100 - +this.value; }); // start with an initial value.....simultating an input... ele.parentElement.querySelector('span').textContent = ele.value; }); })

 .slider { -webkit-appearance: none; width: 10%; height: 7px; border-radius: 5px; background: #d3d3d3; outline: none; -webkit-transition: .2s; transition: opacity .2s; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: black; cursor: pointer; } .slider::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: black; cursor: pointer; }

 <h1>Population range slider</h1> <div class="slidecontainer"> <input type="range" min="0" max="100" value="0" class="slider" id="sliderWorkers"> <p>Value wokers: <span id="workers"></span></p> </div> <div class="slidecontainer"> <input type="range" min="0" max="100" value="100" class="slider" id="sliderPeople"> <p>Value people: <span id="people"></span></p> </div>