CODEWITHSUNDEEP
javascripthtml
equinoxe5
equinoxe5

Reputation: 344

Position of range slider not updating after user interaction

I have a simple page that has an embedded video and a range slider that acts as a progress bar. Javascript updates the value of the range slider as the video plays and the slider can be used to move back or forth in the video.

The problem is that if I interact with the range slider to change playback position, the slider will no longer visually move even when the video is playing and javascript is updating the value of the input element.

I'm probably missing some obvious fundamental nuance. Thanks!

Here is the JSFiddle of the setup.

Upvotes: 3

Views: 2085

Answers (2)

Chuu
Chuu

Reputation: 196

If you change the setAttribute to .attribute, it'll work. You can see the difference between setAttribute vs .attribute in this post.

Change this

videoSlider.setAttribute("value", myVideo.currentTime);

To

videoSlider.value = myVideo.currentTime

Upvotes: 2

toastrackengima
toastrackengima

Reputation: 8752

Your problem is this line:

videoSlider.setAttribute("value", myVideo.currentTime);

When you interact with the slider, it's value attribute actually isn't updated in the HTML (check it out in the devtools!), but its internal value property is updated. Thus, this is the property that we need to be changing, as its value supersedes whatever is actually set in the HTML.

Swapping that line out with

videoSlider.value = myVideo.currentTime;

will solve your problem, and is more idiomatic anyway.

Upvotes: 5

Related Questions