I have made two range sliders in my HTML code. The first one works perfectly but the second slider doesn't work.
I think it's the JavaScript that's not working, but I've no idea how to fix this problem.
What am I missing?
const slider = document.querySelector(".slider1");
const value = document.querySelector(".value1");
value.textContent = slider.value;
slider.oninput = function() {
value.textContent = this.value;
}
const sliders = document.querySelector(".slider2");
const values = document.querySelector(".value2");
values.textContent = sliders.values;
sliders.oninput = function() {
values.textContent = this.values;
}<div class="box">
<div class="slider">
<input type="range" min="0" max="10" value="5" step="0.5" class="slider1">
</div>
<div class="value1">100</div>
</div>
<div class="box">
<div class="slider">
<input type="range" min="0" max="10" value="5" step="0.5" class="slider2">
</div>
<div class="value2">100</div>
</div>