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.

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.

• javascript
• html
• slider
• volume

• 1 Did you try mousemove? – SparoHawk Commented Apr 4, 2014 at 22:38
• Can you build a simple example using jsfiddle? It's not that your question isn't clear, it'd just be nice to have a working demo. – Josh Durham Commented Apr 4, 2014 at 22:59
• @SparoHawk Thanks, your solution worked for the volume. This doesn't for the seek bar when trying to advance the video since the video pauses whenever I hover over it. I tried to remove the play/pause functions when scrubbing but that didn't work. – Ushinro Commented Apr 4, 2014 at 23:01

1 Answer 1

1. Using the mousemove is discouraged and would complicate the solution. It is better to use the 'input' event.
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/