Run function only when user drops input type="range"?

Question

I’m wearing a input[type="range"] as progress bar for a video player, it is when 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 runs the player will "bugger", so I want the video to just change the currentTime after user drop input, how can I do this?

Answer 1

What you can do is use the .on mouse event, as an 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 Assi, your example would look this way

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

For further references, see: https://api.jquery.com/mouseup/