How to change the text next to a slider form using JavaScript

Issue

I have the following code in html and js

function slide(){
    let v= document.getElementById("slide_inner");
    document.getElementById("slider").textContent=v.value;
}

<form id="slider">
            <label for="slide_inner">0</label><input id="slide_inner" onchange="slide()" type="range" min="0" max="26" value="0" class="slider">
        </form>
        

However, when I try and move the slider, the slider also disappears and the only the value remains. I only want the 0 to be updated to the new slider value. Is there a way I can avoid this?

Solution

You can use querySelectorAll to set the text:

function slide() {
  let v = document.getElementById("slide_inner");
  document.getElementById("slider").querySelectorAll("label")[0].innerHTML = v.value;
}

<form id="slider">
  <label for="slide_inner">0</label><input id="slide_inner" onchange="slide()" type="range" min="0" max="26" value="0" class="slider">
</form>

Answered By - Harshit Rastogi