What event can I listen for on an HTML5 range input to trgger a function continuously as the slider is dragged?
I'm working on a custom seek-bar slider for an HTML5 video player. I'd like the two values (time elapsed & time remaining, which both update for each second as the video plays) to update while the seek bar is being dragged, so that the user can see the seeking time precisely (I knew I was at 52 minutes last time, so I drag the bar until the time reads 52).
I tried this code, but it's only triggered once for each time the slider is dragged:
var video = $("#fullscreen");
var videoInfo = video.get(0);
var seekBar = $("#seek-bar");
// convert number to double-digit (or greater) values (09, 99, 999)
function digitize(n) {
return n > 9 ? "" + n : "0" + n;
}
// Convert seconds to hh:mm:ss
function secondsToString(intime) {
var numseconds = digitize(Math.floor(intime % 60));
intime = Math.floor(intime / 60);
var numminutes = digitize(intime % 60);
intime = Math.floor(intime / 60);
var numhours = digitize(intime);
return numhours + ":" + numminutes + ":" + numseconds;
}
// While bar is being dragged, update times
seekBar.on('change', function() {
// Calculate the slider value
console.log("Seeking at: " + seekBar[0].value);
var progressHMS = secondsToString(videoInfo.currentTime);
var remainingHMS = "-" + secondsToString(videoInfo.duration -
videoInfo.currentTime);
timeProgress.html(progressHMS);
timeRemaining.html(remainingHMS);
});
And of course, the bar:
<div class="control-section">
<div id="video-time-progress">
00:00:00
</div>
<input type="range" id="seek-bar" value="0" min="0" max="1" step="0.001">
<div id="video-time-remaining">
00:00:00
</div>
</div>
I was thinking perhaps I could detect each time the slider reaches a new step
(1 / 1000 of the length, in this case), but I can't seem to find an event triggered by steps, since change
didn't do it.