How to get slider value for real-time update?

Question

I have an HTML tag with a custom control panel, and in it I want the search bar and the volume panel to update their values ​​in real time when the user smooths the range. This volume is currently being updated after the user configures the slider, and not while the user clicks and drags.

In HTML, I configured them 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 connected them like this:

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

JavaScript, jQuery, , . , , jQuery, . : jQuery, , , .

Answer 1

• mousemove - . "input".
• , (mouserelease, keyup blur), Chrome IE10, /. (.: https://code.google.com/p/chromium/issues/detail?id=155747)
• JS, , JS . , JS vs. JQuery. , . , . addEventListener. ....

, , . , ( FF) x-.

, , :

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

FF: http://jsfiddle.net/trixta/MfLrW/

Chrome IE, / , . "change" , . :

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