title: Input range slider stuck in Firefox
body: <p>When I go to slide a range slider in Firefox, the thumb moves back to its initial location and triggers an oninput event for whatever it's hooked up to. This bounce back happens either immediately or upon the next time I move the mouse over the element. All other browsers I have tested behave as expected. Tabbing to, and using the arrow keys to shift the thumb works as normal.</p>
  
  <p>I have determined that it is likely a problem linked to the JavaScript as the problem goes away if I remove the JavaScript entirely or comment out the onload init function.</p>
  
  <p>I am currently trying to strip the code down to find the culprit but as of now I don't know which particular piece of code is at fault. Any insights would be much appreciated.</p>
  
  <p>Update: I have managed to boil the problem down to under 10 lines of code and have set up a fiddle: <a href="https://jsfiddle.net/nd1fw87z/2/" rel="nofollow noreferrer">https://jsfiddle.net/nd1fw87z/2/</a></p>
  
  <p>or as seen below:</p>
  
  <pre><code>const mouseDeactivate = (event) =&gt; {
      event.preventDefault();
  };
  
  const init = () =&gt; {
      window.onmouseup = mouseDeactivate.bind(window.Event);
  };
  
  window.onload = init();
  </code></pre>
  
  <p>Used in conjunction with the following in the document body:</p>
  
  <pre><code>&lt;input type="range" min="0" max="11"&gt;
  </code></pre>
  
  <p>The problem seems to be caused by preventing the default behavior of the mouseup event. Is there any way to prevent default behavior without breaking the slider in Firefox? Is this a bug I should report, or just an unfortunate side effect of how Firefox handles events?</p>