The JS used to display the HTML range slider value works fine for the first item (A1). However, I also want to use it for A2 projects (actually there are 20 projects, so it needs to be reused 19 times). Is there a way to code for multiple iterations?
const slideValue = document.querySelector("span"); const inputSlider = document.querySelector("input"); inputSlider.oninput = (()=>{ let value = inputSlider.value; slideValue.textContent = value; slideValue.style.left = (value/.1) + "%"; slideValue.classList.add("show"); }); inputSlider.onblur = (()=>{ slideValue.classList.remove("show"); });
A1. Blah Blah Blah.010A2. Blah Blah Blah.010
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Of course. You'll easily recognize your own code, which is wrapped inside a for loop.
var elems = document.querySelectorAll(".range"); elems.forEach(function(elem) { const slideValue = elem.querySelector("span"); const inputSlider = elem.querySelector("input"); inputSlider.oninput = (() => { let value = inputSlider.value; slideValue.textContent = value; slideValue.style.left = (value / .1) + "%"; slideValue.classList.add("show"); }); inputSlider.onblur = (() => { slideValue.classList.remove("show"); }); })