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?
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>