3

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.

equinoxe5
  • 314
  • 1
  • 17
  • The fiddle appears to be working as intended. – Dan Mullin May 08 '21 at 14:22
  • 1
    @DanMullin No, it doesn't. Before interacting with the slider, it changes along with the video progress, after interacting with it, it doesn't, but instead stays in the last position it was set to by the user. – Toastrackenigma May 08 '21 at 14:25
  • I tried it out and viewed the updating value in dev tools. It worked before and after I interacted with it. I'll try it out again just to make sure. – Dan Mullin May 08 '21 at 14:26
  • The behaviour is the same for me on any browser on any OS. To be clear, by range slider I mean the – equinoxe5 May 08 '21 at 14:28
  • 1
    I think the answer Toast gave solves the issue. I was able to reproduce it. – Dan Mullin May 08 '21 at 14:29

2 Answers2

4

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.

Toastrackenigma
  • 7,604
  • 4
  • 45
  • 55
2

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
Chuu
  • 176
  • 7