Execute function only when user releases input type="range"?

Question

Execute function only when user releases input type="range"?

Navigation

#1 by (2 votes)

0

I'm using input[type="range"] as a progress bar for a video player, it's by simulating the event to change the time of the video because I only want the action to be executed only after the user drops the input , Example :

$('input range').bind('change click mousemove', function() {
    var atual_val = $(this).val();
    vid.currenTime = atual_val;
});

If I just leave it that way, each time the user slides / drags the input , while the action is executed the player will "bugar", so I want the video to only change the currentTime after the user drop the input, how can I do this?

jquery video

asked by anonymous 20.04.2017 / 00:45

1 answer

Doubt validate .click () out of function () jQuery Insert query does not work in PHP

score 2 · Accepted Answer

What you can do is use .on mouse event , for example:

.on('mouseup', handler) ou .on('mousedown', handler)

JQuery allows the use of shortcuts to call these events, such as:

$( "#alvo" ).mouseup(function() {
  alert( "Atalho para .mouseup() foi chamado!" );
});

Being so, your example would look this way

$('input range').mouseup(function() {
    var atual_val = $(this).val();
    vid.currenTime = atual_val;
});

For more references, see: link