javascript - 多个滑块相互 react

新手在这里。
我正在做我的第一个项目，我想为其中的每个人（普通人，工人，农民等）提供滑条，但是我不知道如何放置多个滑条以及如何使所有滑条正常工作。我从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>

最佳答案

您可以使用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>