Multiple sliders reacting to each other

Newbie here. I am making one of my first project and I want to have sliders for different people in it (normal people, workers, farmers etc.) but I don´t know how to put multiple sliders and how to get all of them working. I took the code from W3schools and changed some things but it seems that I have broken it and I don´t know what to do with it. I want to have 2 sliders both working and when one slider goes up and the other goes down (assigning people to thier work). Here is my code (I don´t know if it would be to any help)

        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

You can use DOMContentLoaded and addEventListener in order to start your task when the dom is ready.

After you querySelectorAll in order to select all your range elements and for each one its required an event handler.

Inside this event handler you can update the value.

Note: P + DIV now is P with a SPAN inside.

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>