Position 范围 slider 在用户交互后不更新

Question

我有一个简单的页面，其中包含嵌入的视频和用作进度条的范围 slider。 Javascript 在视频播放时更新范围 slider 的value ，并且 slider 可用于在视频中前后移动。

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.

我可能遗漏了一些明显的基本细微差别。 谢谢！

这是设置的 JSFiddle 。

Answer 1

你的问题是这一行：

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

当您与 slider 交互时，它的value属性实际上并未在 HTML 中更新（在 devtools 中查看），但其内部 value 属性已更新。 因此，这是我们需要更改的属性，因为它的值取代了 HTML 中实际设置的任何值。

交换那条线

videoSlider.value = myVideo.currentTime;

将解决您的问题，并且无论如何都更惯用。

Answer 2

如果将 setAttribute 更改为 .attribute，它将起作用。 您可以在这篇文章中看到 setAttribute 与.attribute 之间的区别。

改变这个

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

至

videoSlider.value = myVideo.currentTime