如何让滑块的值实时更新?

编程入门行业动态更新时间:2024-10-28 00:24:59

本文介绍了如何让滑块的值实时更新?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我有一个带有自定义控制栏的 HTML 视频标签，我希望搜索栏和音量栏在用户浏览范围时实时更新它们的值.目前，音量会在用户调整滑块后更新，而不是在用户点击和拖动时更新.

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:

在我的 JavaScript 中，我将它们连接起来:

And in my JavaScript I have them hooked up like so:

// 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; });

我想从头开始做这件事，而不是使用像 jQuery 这样的 JavaScript 库，即使我知道该库已经这样做了.我见过的大多数解决方案都涉及 jQuery，但我不想使用它.这是为了:减少对 jQuery 的依赖，允许更多的控制权，主要是作为一种学习体验.

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.

推荐答案

使用鼠标移动是一种愚蠢的解决方法.有一个名为输入"的事件.

应在用户将自己提交到特定值(mouserelease、keyup 或 blur)后立即分派更改事件，但请注意 Chrome 和 IE10 对这种不同的输入/更改事件行为的错误实现.(请参阅:code.google/p/chromium/issues/detail?id=155747)

如果您想学习 JS，请学习如何构建 JS 并在组件中思考.这比使用原生 JS 与 JQuery 重要得多.例如，您正在使用 id.这意味着您在一页上只能有一个媒体播放器.您省略了 addEventListener 的第三个参数.等等……

所以解释如何完成工作.取决于您是在标准兼容浏览器(目前只有 FF)还是在 x-browser 环境中进行测试.

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.

要在用户与之交互时获取输入的当前值，只需使用输入事件:

To get the current value of an input while the user is interacting with it, simply use the input event:

range.addEventListener('input', onInput, false);

这是 FF 的工作演示:jsfiddle/trixta/MfLrW/

Here is a working demo for FF: jsfiddle/trixta/MfLrW/

如果您想在 Chrome 和 IE 中完成这项工作，您必须使用输入/更改并将它们视为只有输入事件.然后您需要自己计算更改"事件，这并不简单.但这是一个适合您的示例:

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: