javascript 如何获取滑块的值以实时更新？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22874143/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get the value of a slider to update in real-time?
提问by Ushinro
I have an HTML video tag with a customized control bar and in it I want both the seek bar and volume bar to update their values in real-time as the user scrubs through the range. Currently the volume updates after the user adjusts the slider and not while the user is clicking-and-dragging.
我有一个带有自定义控制栏的 HTML 视频标签，我希望搜索栏和音量栏在用户浏览范围时实时更新它们的值。当前，音量会在用户调整滑块后更新，而不是在用户单击并拖动时更新。
In HTML I have them set up as such:
在 HTML 中，我将它们设置为：
<div id="video-controls">
// ...
<input type="range" id="seek-bar" value="0">
<input type="range" id="volume-bar" min="0" max="1" step="0.01" value="1">
// ...
</div>
And in my JavaScript I have them hooked up like so:
在我的 JavaScript 中，我将它们连接起来，如下所示：
// Change current viewing time when scrubbing through the progress bar
seekBar.addEventListener('change', function() {
// Calculate the new time
var time = video.duration * (seekBar.value / 100);
// Update the video time
video.currentTime = time;
});
// Update the seek bar as the video plays
video.addEventListener('timeupdate', function() {
// Calculate the slider value
var value = (100 / video.duration) * video.currentTime;
// Update the slider value
seekBar.value = value;
});
// Pause the video when the seek handle is being dragged
seekBar.addEventListener('mousedown', function() {
video.pause();
});
// Play the video when the seek handle is dropped
seekBar.addEventListener('mouseup', function() {
video.play();
});
// Adjust video volume when scrubbing through the volume bar
volumeBar.addEventListener('change', function() {
// Update the video volume
video.volume = volumeBar.value;
});
I want to do this from scratch and not use JavaScript libraries like jQuery even though I know this has already been done for that library. Most of the solutions I've seen involve jQuery but I don't want to use it. This is for: reducing the dependency on jQuery, allowing for more control on my end, and primarily as a learning experience.
我想从头开始做这件事，而不是使用像 jQuery 这样的 JavaScript 库，即使我知道这已经为该库完成了。我见过的大多数解决方案都涉及 jQuery，但我不想使用它。这是为了：减少对 jQuery 的依赖，允许更多的控制，主要是作为一种学习经验。
回答by alexander farkas
- Using the mousemove is a stupid workaround. There is an event called 'input'.
- The change event should be dispatched as soon as the user as commited himself to a specific value (mouserelease, keyup or blur), but beware Chrome and IE10 have bad implementations of this different input/change event behavior. (see: https://code.google.com/p/chromium/issues/detail?id=155747)
- If you want to learn JS, learn how to structure your JS and think in components. This is a lot more important than using native JS vs. JQuery. For example, you are using ids. This means you can only have one mediaplayer on one page. You are omitting the third parameter of addEventListener. And so on....
- 使用 mousemove 是一种愚蠢的解决方法。有一个事件叫做“输入”。
- 一旦用户将自己提交给特定的值（鼠标释放、按键或模糊），就应该调度更改事件，但要注意 Chrome 和 IE10 对这种不同的输入/更改事件行为的实现不好。（参见：https: //code.google.com/p/chromium/issues/detail?id=155747）
- 如果您想学习 JS，请学习如何构建您的 JS 并在组件中进行思考。这比使用原生 JS 和 JQuery 重要得多。例如，您正在使用 ID。这意味着您只能在一页上拥有一个媒体播放器。您省略了 addEventListener 的第三个参数。等等....
So the explanation how to get things done. Depends wether you are testing in a standards compilant browser (currently only FF) or in x-browser enviroment.
所以解释了如何完成任务。取决于您是在符合标准的浏览器（目前只有 FF）中还是在 x 浏览器环境中进行测试。
To get the current value of an input while the user is interacting with it, simply use the input event:
要在用户与其交互时获取输入的当前值，只需使用 input 事件：
range.addEventListener('input', onInput, false);
Here is a working demo for FF: http://jsfiddle.net/trixta/MfLrW/
这是 FF 的工作演示：http: //jsfiddle.net/trixta/MfLrW/
In case you want to get this work in Chrome and IE, you have to use the input/change and treat them like it would be only the input event. Then you need to compute the "change" event yourself, which isn't really simple. But here is a working example for you:
如果您想在 Chrome 和 IE 中完成这项工作，您必须使用输入/更改并将它们视为仅输入事件。然后您需要自己计算“更改”事件，这并不简单。但这里有一个适用于您的示例：
