Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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()">
like image 921
Gabriel ThaKid Avatar asked Mar 05 '14 13:03

Gabriel ThaKid


2 Answers

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.
like image 158
ˈvɔlə Avatar answered Nov 15 '22 20:11

ˈvɔlə


tomhughes makes a good point re: accessibility.

It's possibility to add onkeyup to the list:

<input type="range" min="0" max="1" 
   onmouseup="callfunction()" 
   ontouchend="callfunction()"
   onkeyup="callfunction()"
>
like image 41
shawn caza Avatar answered Nov 15 '22 22:11

shawn caza