onchange event on input type range is not triggering in firefox while dragging

Question

When I played with  lt input type  range  gt   Firefox triggers an onchange event only if we drop the slider to a new position where Chrome and others triggers onchange events while the slider is dragged   How can I make it happen on dragging in Firefox    x000D   x000D  function showVal newVal   x000D      document getElementById  valBox   innerHTML newVal  x000D    x000D   lt span id  valBox  gt  lt  span gt  x000D   lt input type  range  min  5  max  10  step  1  onchange  showVal this value   gt  x000D   x000D   x000D

User · Answer

UPDATE  I am leaving this answer here as an example of how to use mouse events to use range slider interactions in desktop  but not mobile  browsers  However  I have now also written a completely different and  I believe  better answer elsewhere on this page that uses a different approach to providing a cross-browser desktop-and-mobile solution to this problem   Original answer   Summary  A cross-browser  plain JavaScript  i e  no-jQuery  solution to allow reading range input values without using on  input     and or on  change     which work inconsistently between browsers   As of today  late Feb  2016   there is still browser inconsistency so I m providing a new work-around here   The problem  When using a range input  i e  a slider  on  input     provides continuously updated range values in Mac and Windows Firefox  Chrome and Opera as well as Mac Safari  while on  change     only reports the range value upon mouse-up  In contrast  in Internet Explorer  v11   on  input     does not work at all  and on  change     is continuously updated   I report here 2 strategies to get identical continuous range value reporting in all browsers using vanilla JavaScript  i e  no jQuery  by using the mousedown  mousemove and  possibly  mouseup events   Strategy 1  Shorter but less efficient  If you prefer shorter code over more efficient code  you can use this 1st solution which uses mousesdown and mousemove but not mouseup  This reads the slider as needed  but continues firing unnecessarily during any mouse-over events  even when the user has not clicked and is thus not dragging the slider  It essentially reads the range value both after  mousedown  and during  mousemove  events  slightly delaying each using requestAnimationFrame    x000D   x000D  var rng   document querySelector  input    x000D   x000D  read  mousedown    x000D  read  mousemove    x000D  read  keydown       include this to also allow keyboard control x000D   x000D  function read evtType    x000D    rng addEventListener evtType  function     x000D      window requestAnimationFrame function      x000D        document querySelector  div   innerHTML   rng value  x000D        rng setAttribute  aria-valuenow   rng value      include for accessibility x000D          x000D        x000D    x000D   lt div gt 50 lt  div gt  lt input type  range   gt  x000D   x000D   x000D    Strategy 2  Longer but more efficient  If you need more efficient code and can tolerate longer code length  then you can use the following solution which uses mousedown  mousemove and mouseup  This also reads the slider as needed  but appropriately stops reading it as soon as the mouse button is released  The essential difference is that is only starts listening for  mousemove  after  mousedown   and it stops listening for  mousemove  after  mouseup     x000D   x000D  var rng   document querySelector  input    x000D   x000D  var listener   function     x000D    window requestAnimationFrame function     x000D      document querySelector  div   innerHTML   rng value  x000D        x000D     x000D   x000D  rng addEventListener  mousedown   function     x000D    listener    x000D    rng addEventListener  mousemove   listener   x000D      x000D  rng addEventListener  mouseup   function     x000D    rng removeEventListener  mousemove   listener   x000D      x000D   x000D     include the following line to maintain accessibility x000D     by allowing the listener to also be fired for x000D     appropriate keyboard events x000D  rng addEventListener  keydown   listener   x000D   lt div gt 50 lt  div gt  lt input type  range   gt  x000D   x000D   x000D    Demo  Fuller explanation of the need for  and implementation of  the above work-arounds  The following code more fully demonstrates numerous aspects of this strategy  Explanations are embedded in the demonstration    x000D   x000D  var select  inp  listen  unlisten  anim  show  onInp  onChg  onDn1  onDn2  onMv1  onMv2  onUp  onMvCombo1  onDnCombo1  onUpCombo2  onMvCombo2  onDnCombo2  x000D   x000D  select     function selctr        return document querySelector selctr           x000D  inp   select  input    x000D  listen     function evtTyp  cb    return inp    addEventListener evtTyp  cb      x000D  unlisten   function evtTyp  cb    return inp removeEventListener evtTyp  cb      x000D  anim       function cb            return window requestAnimationFrame cb         x000D  show   function id    x000D   return function     x000D      select       id     td td td      innerHTML   inp value  x000D      select       id     td td td td   innerHTML    Math random     1e20  toString 36      random text x000D       x000D     x000D   x000D  onInp                         show  inp                                           x000D  onChg                         show  chg                                           x000D  onDn1                         show  mdn1                                          x000D  onDn2        function    anim show  mdn2                                          x000D  onMv1                         show  mmv1                                          x000D  onMv2        function    anim show  mmv2                                          x000D  onUp                          show  mup                                           x000D  onMvCombo1   function    anim show  cmb1                                          x000D  onDnCombo1   function    anim show  cmb1       listen  mousemove   onMvCombo1     x000D  onUpCombo2   function                        unlisten  mousemove   onMvCombo2     x000D  onMvCombo2   function    anim show  cmb2                                          x000D  onDnCombo2   function    anim show  cmb2       listen  mousemove   onMvCombo2     x000D   x000D  listen  input       onInp        x000D  listen  change      onChg        x000D  listen  mousedown   onDn1        x000D  listen  mousedown   onDn2        x000D  listen  mousemove   onMv1        x000D  listen  mousemove   onMv2        x000D  listen  mouseup     onUp         x000D  listen  mousedown   onDnCombo1   x000D  listen  mousedown   onDnCombo2   x000D  listen  mouseup     onUpCombo2   x000D  table  border-collapse  collapse  font  10pt Courier   x000D  th  td  border  solid black 1px  padding  0 0 5em   x000D  input  margin  2em   x000D  li  padding-bottom  1em   x000D   lt p gt Click on  Full page  to see the demonstration properly  lt  p gt  x000D   lt table gt  x000D     lt tr gt  lt th gt  lt  th gt  lt th gt event lt  th gt  lt th gt range value lt  th gt  lt th gt random update indicator lt  th gt  lt  tr gt  x000D     lt tr id  inp   gt  lt td gt A lt  td gt  lt td gt input                                 lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D     lt tr id  chg   gt  lt td gt B lt  td gt  lt td gt change                                lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D     lt tr id  mdn1  gt  lt td gt C lt  td gt  lt td gt mousedown                             lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D     lt tr id  mdn2  gt  lt td gt D lt  td gt  lt td gt mousedown using requestAnimationFrame lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D     lt tr id  mmv1  gt  lt td gt E lt  td gt  lt td gt mousemove                             lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D     lt tr id  mmv2  gt  lt td gt F lt  td gt  lt td gt mousemove using requestAnimationFrame lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D     lt tr id  mup   gt  lt td gt G lt  td gt  lt td gt mouseup                               lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D     lt tr id  cmb1  gt  lt td gt H lt  td gt  lt td gt mousedown move combo                  lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D     lt tr id  cmb2  gt  lt td gt I lt  td gt  lt td gt mousedown move up combo               lt  td gt  lt td gt 100 lt  td gt  lt td gt - lt  td gt  lt  tr gt  x000D   lt  table gt  x000D   lt input type  range  min  100  max  999  value  100   gt  x000D   lt ol gt  x000D     lt li gt The  range value  column shows the value of the  value  attribute of the range-type input  i e  the slider  The  random update indicator  column shows random text as an indicator of whether events are being actively fired and handled  lt  li gt  x000D     lt li gt To see browser differences between input and change event implementations  use the slider in different browsers and compare A and amp nbsp B  lt  li gt  x000D     lt li gt To see the importance of  requestAnimationFrame  on  mousedown   click a new location on the slider and compare C amp nbsp  incorrect  and D amp nbsp  correct   lt  li gt  x000D     lt li gt To see the importance of  requestAnimationFrame  on  mousemove   click and drag but do not release the slider  and compare E amp nbsp  often 1 amp nbsp pixel behind  and F amp nbsp  correct   lt  li gt  x000D     lt li gt To see why an initial mousedown is required  i e  to see why mousemove alone is insufficient   click and hold but do not drag the slider and compare E amp nbsp  incorrect   F amp nbsp  incorrect  and H amp nbsp  correct   lt  li gt  x000D     lt li gt To see how the mouse event combinations can provide a work-around for continuous update of a range-type input  use the slider in any manner and note whichever of A or B continuously updates the range value in your current browser  Then  while still using the slider  note that H and I provide the same continuously updated range value readings as A or B  lt  li gt  x000D     lt li gt To see how the mouseup event reduces unnecessary calculations in the work-around  use the slider in any manner and compare H and amp nbsp I  They both provide correct range value readings  However  then ensure the mouse is released  i e  not clicked  and move it over the slider without clicking and notice the ongoing updates in the third table column for H but not amp nbsp I  lt  li gt  x000D   lt  ol gt  x000D   x000D   x000D

User · Answer

I m posting this as an answer in case you are like me and cannot figure out why the range type input doesn t work on ANY mobile browsers  If you develop mobile apps on your laptop and use the responsive mode to emulate touch  you will notice the range doesn t even move when you have the touch simulator activated  It starts moving when you deactivate it  I went on for 2 days trying every piece of code I could find on the subject and could not make it work for the life of me  I provide a WORKING solution in this post  Mobile Browsers And Hybrid Apps Mobile browsers run using a component called Webkit for iOS and WebView for Android  The WebView WebKit enables you to embed a web browser  which does not have any chrome or firefox  browser  controls including window frames  menus  toolbars and scroll bars into your activity layout  In other words  mobile browsers lack a lot of web components normally found in regular browsers  This is the problem with the range type input  If the user s browser doesn t support range type  it will fall back and treat it as a text input  This is why you cannot move the range when the touch simulator is activated   Read more here on browser compatibility  jQuery Slider jQuery provides a slider that somehow works with touch simulation but it is choppy and not very smooth  It wasn t satisfying to me and it probably wont be for you either but you can make it work more smoothly if you combine it with jqueryUi  Best Solution   Range Touch If you develop hybrid apps on your laptop  there is a simple and easy library you can use to enable range type input to work with touch events  This library is called Range Touch  DEMO  For more information on this issue check this thread here  Recreating the HTML5 range input for Mobile Safari  webkit

User · Answer

You could use the JavaScript  ondrag  event to fire continuously  It is better than  input  due to the following reasons    Browser support  Could differentiate between  ondrag  and  change  event   input  fires for both drag and change    In jQuery       sample   on  drag  function e          Reference  http   www w3schools com TAgs ev ondrag asp

User · Answer

Apparently Chrome and Safari are wrong  onchange should only be triggered when the user releases the mouse  To get continuous updates  you should use the oninput event  which will capture live updates in Firefox  Safari and Chrome  both from the mouse and the keyboard   However  oninput is not supported in IE10  so your best bet is to combine the two event handlers  like this    lt span id  valBox  gt  lt  span gt   lt input type  range  min  5  max  10  step  1      oninput  showVal this value   onchange  showVal this value   gt    Check out this Bugzilla thread for more information

User · Answer

Yet another approach - just set a flag on an element signaling which type of event should be handled   function setRangeValueChangeHandler rangeElement  handler        rangeElement oninput    event    gt            handler event              Save flag that we are using onInput in current browser         event target onInputHasBeenCalled   true              rangeElement onchange    event    gt               Call only if we are not using onInput in current browser         if   event target onInputHasBeenCalled                handler event

User · Answer

For a good cross-browser behavior  and understandable code  best is to use the onchange attribute in combination of a form   x000D   x000D  function showVal      valBox innerHTML   inVal value    x000D   lt form onchange  showVal    gt     lt input type  range  min  5  max  10  step  1  id  inVal  gt   lt  form gt    lt span id  valBox  gt  lt  span gt  x000D   x000D   x000D   The same using oninput  the value is changed directly   x000D   x000D  function showVal      valBox innerHTML   inVal value    x000D   lt form oninput  showVal    gt     lt input type  range  min  5  max  10  step  1  id  inVal  gt   lt  form gt    lt span id  valBox  gt  lt  span gt  x000D   x000D   x000D

User · Answer

Andrew Willem s solutions are not mobile device compatible    Here s a modification of his second solution that works in Edge  IE  Opera  FF  Chrome  iOS Safari and mobile equivalents  that I could test    Update 1  Removed  requestAnimationFrame  portion  as I agree it s not necessary    var listener   function          do whatever     slider1 addEventListener  input   function       listener      slider1 addEventListener  change   listener       slider1 addEventListener  change   function       listener      slider1 removeEventListener  input   listener          Update 2  Response to Andrew s 2nd Jun 2016 updated answer    Thanks  Andrew - that appears to work in every browser I could find  Win desktop  IE  Chrome  Opera  FF  Android Chrome  Opera and FF  iOS Safari    Update 3  if   oninput in slider  solution  The following appears to work across all the above browsers   I cannot find the original source now   I was using this  but it subsequently failed on IE and so I went looking for a different one  hence I ended up here   if   oninput  in slider1        slider1 addEventListener  input   function                 do whatever         false       But before I checked your solution  I noticed this was working again in IE - perhaps there was some other conflict

User · Answer

SUMMARY   I provide here a no-jQuery cross-browser desktop-and-mobile ability to consistently respond to range slider interactions  something not possible in current browsers  It essentially forces all browsers to emulate IE11 s on  change     event for either their on  change     or on  input     events  The new function is     function onRangeChange r f      var n c m    r addEventListener  input  function e  n 1 c e target value if c  m f e  m c       r addEventListener  change  function e  if  n f e             where r is your range input element and f is your listener  The listener will be called after any interaction that changes the range slider value but not after interactions that do not change that value  including initial mouse or touch interactions at the current slider position or upon moving off either end of the slider   Problem   As of early June 2016  different browsers differ in terms of how they respond to range slider usage  Five scenarios are relevant    initial mouse-down  or touch-start  at the current slider position initial mouse-down  or touch-start  at a new slider position any subsequent mouse  or touch  movement after 1 or 2 along the slider any subsequent mouse  or touch  movement after 1 or 2 past either end of the slider final mouse-up  or touch-end    The following table shows how at least three different desktop browsers differ in their behaviour with respect to which of the above scenarios they respond to     Solution   The onRangeChange function provides a consistent and predictable cross-browser response to range slider interactions  It forces all browsers to behave according to the following table     In IE11  the code essentially allows everything to operate as per the status quo  i e  it allows the  change  event to function in its standard way and the  input  event is irrelevant as it never fires anyway  In other browsers  the  change  event is effectively silenced  to prevent extra and sometimes not-readily-apparent events from firing   In addition  the  input  event fires its listener only when the range slider s value changes  For some browsers  e g  Firefox  this occurs because the listener is effectively silenced in scenarios 1  4 and 5 from the above list    If you truly require a listener to be activated in either scenario 1  4 and or 5 you could try incorporating  mousedown   touchstart    mousemove   touchmove  and or  mouseup   touchend  events  Such a solution is beyond the scope of this answer    Functionality in Mobile Browsers   I have tested this code in desktop browsers but not in any mobile browsers  However  in another answer on this page MBourne has shown that my solution here     appears to work in every browser I could find  Win desktop  IE  Chrome  Opera  FF  Android Chrome  Opera and FF  iOS Safari     Thanks MBourne    Usage   To use this solution  include the onRangeChange function from the summary above  simplified minified  or the demo code snippet below  functionally identical but more self-explanatory  in your own code  Invoke it as follows   onRangeChange myRangeInputElmt  myListener     where myRangeInputElmt is your desired  lt input type  range  gt  DOM element and myListener is the listener handler function you want invoked upon  change -like events   Your listener may be parameter-less if desired or may use the event parameter  i e  either of the following would work  depending on your needs   var myListener   function          or  var myListener   function evt          Removing the event listener from the input element  e g  using removeEventListener  is not addressed in this answer    Demo Description   In the code snippet below  the function onRangeChange provides the universal solution  The rest of the code is simply an example to demonstrate its use  Any variable that begins with my    is irrelevant to the universal solution and is only present for the sake of the demo   The demo shows the range slider value as well as the number of times the standard  change    input  and custom  onRangeChange  events have fired  rows A  B and C respectively   When running this snippet in different browsers  note the following as you interact with the range slider    In IE11  the values in rows A and C both change in scenarios 2 and 3 above while row B never changes  In Chrome and Safari  the values in rows B and C both change in scenarios 2 and 3 while row A changes only for scenario 5  In Firefox  the value in row A changes only for scenario 5  row B changes for all five scenarios  and row C changes only for scenarios 2 and 3  In all of the above browsers  the changes in row C  the proposed solution  are identical  i e  only for scenarios 2 and 3    Demo Code    x000D   x000D     main function for emulating IE11 s  change  event  x000D   x000D  function onRangeChange rangeInputElmt  listener    x000D   x000D    var inputEvtHasNeverFired   true  x000D   x000D    var rangeValue    current  undefined  mostRecent  undefined   x000D     x000D    rangeInputElmt addEventListener  input   function evt    x000D      inputEvtHasNeverFired   false  x000D      rangeValue current   evt target value  x000D      if  rangeValue current     rangeValue mostRecent    x000D        listener evt   x000D        x000D      rangeValue mostRecent   rangeValue current  x000D        x000D   x000D    rangeInputElmt addEventListener  change   function evt    x000D      if  inputEvtHasNeverFired    x000D        listener evt   x000D        x000D         x000D   x000D    x000D   x000D     example usage  x000D   x000D  var myRangeInputElmt   document querySelector  input              x000D  var myRangeValPar      document querySelector   rangeValPar       x000D  var myNumChgEvtsCell   document querySelector   numChgEvtsCell    x000D  var myNumInpEvtsCell   document querySelector   numInpEvtsCell    x000D  var myNumCusEvtsCell   document querySelector   numCusEvtsCell    x000D   x000D  var myNumEvts    input  0  change  0  custom  0   x000D   x000D  var myUpdate   function     x000D    myNumChgEvtsCell innerHTML   myNumEvts  change    x000D    myNumInpEvtsCell innerHTML   myNumEvts  input     x000D    myNumCusEvtsCell innerHTML   myNumEvts  custom    x000D     x000D   x000D    input    change   forEach function myEvtType    x000D    myRangeInputElmt addEventListener myEvtType   function     x000D      myNumEvts myEvtType     1  x000D      myUpdate    x000D        x000D      x000D   x000D  var myListener   function myEvt    x000D    myNumEvts  custom      1  x000D    myRangeValPar innerHTML    range value      myEvt target value  x000D    myUpdate    x000D     x000D   x000D  onRangeChange myRangeInputElmt  myListener   x000D  table   x000D    border-collapse  collapse    x000D    x000D  th  td   x000D    text-align  left  x000D    border  solid black 1px  x000D    padding  5px 15px  x000D    x000D   lt input type  range   gt  x000D   lt p id  rangeValPar  gt range value  50 lt  p gt  x000D   lt table gt  x000D     lt tr gt  lt th gt row lt  th gt  lt th gt event type                      lt  th gt  lt th gt number of events     lt  th gt  lt tr gt  x000D     lt tr gt  lt td gt A lt  td gt  lt td gt standard  change  events          lt  td gt  lt td id  numChgEvtsCell  gt 0 lt  td gt  lt  tr gt  x000D     lt tr gt  lt td gt B lt  td gt  lt td gt standard  input  events           lt  td gt  lt td id  numInpEvtsCell  gt 0 lt  td gt  lt  tr gt  x000D     lt tr gt  lt td gt C lt  td gt  lt td gt new custom  onRangeChange  events lt  td gt  lt td id  numCusEvtsCell  gt 0 lt  td gt  lt  tr gt  x000D   lt  table gt  x000D   x000D   x000D    Credit   While the implementation here is largely my own  it was inspired by MBourne s answer  That other answer suggested that the  input  and  change  events could be merged and that the resulting code would work in both desktop and mobile browsers  However  the code in that answer results in hidden  extra  events being fired  which in and of itself is problematic  and the events fired differ between browsers  a further problem  My implementation here solves those problems   Keywords   JavaScript input type range slider events change input browser compatability cross-browser desktop mobile no-jQuery

User · Answer

I m posting this as an answer because it deserves to be it s own answer rather than a comment under a less useful answer  I find this method much better than the accepted answer since it can keep all the js in a separate file from the HTML   Answer provided by Jamrelian in his comment under the accepted answer       myelement   on  input change   function           do something       Just be aware of this comment by  Jaime though     Just note that with this solution  in chrome you will get two calls to the handler  one per event   so if you care for that  then you need to guard against it    As in it will fire the event when you have stopped moving the mouse  and then again when you release the mouse button   Update  In relation to the change event and input event causing the functionality to trigger twice  this is pretty much a non-issue   If you have a function firing off on input  it is extremely unlikely that there will be a problem when the change event fires   input fires rapidly as you drag a range input slider  Worrying about one more function call firing at the end is like worrying about a single drop of water compared to the ocean of water that is the input events   The reason for even including the change event at all is for the sake of browser compatibility  mainly with IE

[javascript] onchange event on input type=range is not triggering in firefox while dragging

Examples related to javascript

Examples related to html

Examples related to firefox

Examples related to input

Examples related to onchange