我如何获得实时更新滑块的值？ [英] How do I get the value of a slider to update in real-time?

问题描述

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

在HTML中，我将它们设置为：

 < div id =video-controls> 
 // ... 
< input type =rangeid =seek-barvalue =0> 
< input type =rangeid =volume-barmin =0max =1step =0.01value =1> 
 // ... 
< / div> 
  

在我的JavaScript中，我把它们连接起来就像这样：

  //通过进度条清理当前查看时间
 seekBar.addEventListener（'change'，function（）{
 //计算新时间
 var time = video.duration *（seekBar.value / 100）; 
 
 //更新视频时间
 video.currentTime = time; 
 }）; 
 
 //视频播放时更新搜索栏
 video.addEventListener（'timeupdate'，function（）{
 //计算滑块值
 var value =（100 / video.duration）* video.currentTime; 
 
 //更新滑块值
 seekBar.value = value; 
}）; 
 
 //拖动查找句柄时暂停视频
 seekBar.addEventListener（'mousedown'，function（）{
 video.pause（）; 
 }）; 
 
 //当查找句柄被删除时播放视频
 seekBar.addEventListener（'mouseup'，function（）{
 video.play（）; 
} ）; 
 
 //通过音量栏调整视频音量
 volumeBar.addEventListener（'change'，function（）{
 //更新视频音量
 video .volume = volumeBar.value; 
}）; 
  

我想从零开始做这件事，但不使用jQuery等JavaScript库，尽管我知道这已经存在已经为该图书馆完成了。我见过的大多数解决方案都涉及jQuery，但我不想使用它。这是为了：减少对jQuery的依赖，允许在我的结尾进行更多的控制，主要作为学习体验。 解决方案

使用mousemove是一个愚蠢的解决方法。有一个名为'输入'的事件。

一旦用户将自己提交给特定的值（mouserelease，keyup或blur），应该立即调度change事件，但要注意Chrome和IE10对这种不同的输入/更改事件行为有不好的实现。 （请参阅： https://code.google.com/p/chromium/issues/detail?id = $ 155747 ）

如果您想学习JS，请学习如何构建您的JS并在组件中进行思考。这比使用本地JS与JQuery更重要。例如，您正在使用ID。这意味着你只能在一个页面上拥有一个媒体播放器。您正在省略addEventListener的第三个参数。等等....

所以说明如何完成工作。取决于您在标准compilant浏览器（目前仅用于FF）或x浏览器环境中进行测试。

要在用户进行交互时获取输入的当前值使用它，只需使用输入事件：

  range.addEventListener（'input'，onInput，false）; 
  

以下是FF的工作演示： http://jsfiddle.net/trixta/MfLrW/

如果你想在Chrome和IE中获得这项工作，你必须使用输入/改变，并把它们当作只是输入事件。然后你需要自己计算变化事件，这并不是很简单。但这里有一个适合你的例子：

http://jsfiddle.net / trixta / AJLSV /

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.

In HTML I have them set up as such:

<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:

// 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.

解决方案

1. Using the mousemove is a stupid workaround. There is an event called 'input'.
2. 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)
3. 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....

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

Here is a working demo for 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:

http://jsfiddle.net/trixta/AJLSV/

这篇关于我如何获得实时更新滑块的值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！