Is there an HTML attribute/event handler for 'on mouse release'?

Question

I need a function to be called when the slider knob has been released. onchange changes the value while I'm changing it. Is there a solution for this like

<input type="range" min="0" max="1000" onrelease="callfunction()">

Aldos

The example is a bit odd, since such an element lets the user choose just between 0 and 1. It should have a suitable step attribute, e.g. step="0.01" (or a different max attribute). – Reflectance

I just changed the original code for simplicity, also the question has already been answered – Aldos

Just because it has been answered does not mean it should not be corrected. If you want to simplify it and make the element meaningful, you can just default both min and max. – Reflectance

the thing is it wasn't wrong on the first place, I just simplified the code of the original project. the values min and max are completely irrelevant, the only relevant attribute is "onrelease" which doesn't exist – Aldos

Answer 1

Use the mouseup event on desktop browsers and the touchend event on mobile phones for handling this user interaction.

<input type="range" min="0" max="1" 
       onmouseup="callfunction()" 
       ontouchend="callfunction()">

I would recommend to check caniuse.com for browser support.

Known issues (as of 2019-03-25):

• IE10 & 11 fire the "change" event instead of "input" on mousemove.
• IE10 & 11 have some bugs related to the step value.

Usa

This appears to be the practical solution. Event handling for input type=range is different in different browsers (and still really experimental). Just moving the slider causes change events in IE, input events in Firefox, and both of them in Chrome! But releasing it triggers onmouseup in all of them. This might not work in implementations that do not use a mouse in this context. – Reflectance

@JukkaK.Korpela - You are absolutely right. This won't work e.g. for touch devices. – Cothran

But does this also work on touch devices? What would be the equivalent event there? – Bullhead

This won't cover users who use the keyboard to modify the range (e.g. users who don't use a pointing device for accessibility reasons). – Ungula

Answer 2

tomhughes makes a good point re: accessibility.

It's possibile to add onkeyup to the list:

<input type="range" min="0" max="1" 
   onmouseup="callfunction()" 
   ontouchend="callfunction()"
   onkeyup="callfunction()"
>

Applewhite