CODEWITHSUNDEEP
javascripthtmldomdom-events
vsync
vsync

Reputation: 130175

Input range fires "input" event on mouseup in Firefox

It seems like using the input event on a type=range input element works differently in Webkit and Firefox. I really don't understand why the event fires both on sliding the slider and while releasing the mouse.

I very much do not want the event to fire again when releasing the mouse button.

Any ideas how to stop this mouseup nonsense with the input event?

var counter = document.querySelector('div'),
    rangeInput = document.querySelector('input');

rangeInput.addEventListener('input', function(){
  counter.innerHTML = 1 + +counter.innerHTML;
});
body{ font:18px Arial; }
input{ width:80%; }
div{ color:red; }
div::before{ content:'Event fired: '; color:#555; }
div::after{ content:' times'; color:#555; }
<p>Try to click the slider, wait and release the mouse</p>

<input type="range" min="1" max="100" step="1">

<div>0</div>

Demo page

Update: opened a bug in bugzilla

Upvotes: 3

Views: 2317

Answers (1)

Gogol
Gogol

Reputation: 3070

How about listening to the change event instead of input?

As per your example:

var counter = document.querySelector('div'),
    rangeInput = document.querySelector('input');

rangeInput.addEventListener('change', function(){
  counter.innerHTML = 1 + +counter.innerHTML;
});
body{ font:18px Arial; }
input{ width:80%; }
div{ color:red; }
div::before{ content:'Event fired: '; color:#555; }
div::after{ content:' times'; color:#555; }
<p>Try to click the slider, wait and release the mouse</p>

<input type="range" min="1" max="100" step="1">

<div>0</div>

This seems to be a browser bug nevertheless. See this issue posted in react project.

What you could do is to have this as a fallback in browsers that show this behaviour. Detect the browsers that are doing this and have this fallback for them which cancels out the extra increament.

var counter = document.querySelector('div'),
    rangeInput = document.querySelector('input');

rangeInput.addEventListener('input', function(){
  counter.innerHTML = 1 + +counter.innerHTML;
});
 rangeInput.addEventListener('change', function(){
  /* if firefox - http://stackoverflow.com/a/9851769/1437261 */
  if(typeof InstallTrigger !== 'undefined'){
     counter.innerHTML =  counter.innerHTML - 1;
  }
  
  return false;
});
body{ font:18px Arial; }
input{ width:80%; }
div{ color:red; }
div::before{ content:'Event fired: '; color:#555; }
div::after{ content:' times'; color:#555; }
<p>Try to click the slider, wait and release the mouse</p>

<input type="range" min="1" max="100" step="1">

<div>0</div>

Upvotes: 1

Related Questions