How can I update the position of a range input slider via vanilla js?

Question

I'm trying to programmatically update the position of my input slider (type="range").

I'm setting the value, however, that won't update the position of the slider.

I've also tried using:

element.dispatchEvent(new Event('input'))

to force an input change. This event does fire, however, the slider won't visually update.

   function changeSliderPosition(position) {
       let e = document.getElementById('mySlider');
       e.value = position;
       //Also set the position of the slider to position
   }

I've seen some solutions that work in JQuery, but I don't want to include an entire library or even use it at all for such a seemingly small issue.

I'd appreciate any help with this problem!

Answer 1

Assuming that your slider ( input type="range" ) has its min and max attributes set, all you need to do is set the value :

 let input = document.getElementById("in"); let btn = document.querySelector("button"); let slider = document.querySelector("input[type='range']"); btn.addEventListener("click", function(){ slider.value = input.value; }); 

 Enter the value you want: <input id="in"><button>Go!</button><br> <input type="range" min="1" max="100">