React range input IE11 onChange or onInput workaround

Question

IE11 uses onChange instead of onInput for <input type='range'> elements.

React does not call either of these in IE11.

The onInput works on FF, Chrome, and Edge, so that's OK.

Following the rabbit hole downwards leads here and here, which suggest using onMouseUp or onClick, but I haven't gotten this working either.

I've tried various listener combinations to no avail. I even tried this (which didn't work either, of course). Does someone have a workaround for this?

Isn't it the other way around - that IE uses `onchange` instead of `oninput`... — Shikkediel, Feb 28 '19 at 09:28
Looks like no, not the other way around? https://github.com/facebook/react/issues/2048 Haven't thought about this in a while though, will edit if in error! — Ben, Feb 28 '19 at 17:18
I just messed around with it (without React) and am quite sure IE only uses `change`. I can't check if Edge is different but another answer on [this page](https://stackoverflow.com/a/19067260/3168107) also shows a diagram. — Shikkediel, Mar 02 '19 at 08:28
Ahh you're right, that very page says: `...you should use the oninput event, which will capture live updates in Firefox, Safari and Chrome...` Updated. Thanks for the feedback! — Ben, Mar 05 '19 at 22:59

Ben · Accepted Answer · 2017-06-16T20:46:42.840

After a bit of digging, I've settled on react-range since it's lightweight, straightforward, and works.

render() in its source shows how it does it:

render: function() {
    var props = _extends({}, this.props, {
      defaultValue: this.props.value,
      onClick: this.onRangeClick,
      onKeyDown: this.onRangeKeyDown,
      onMouseMove: this.onRangeChange,
      onChange: function() {},
      ref: this.setRangeRef
    });
    delete props.value;
    return React.createElement(
      'input',
      props
    );
  }

Update

It appears this will be fixed in React 16: https://github.com/facebook/react/issues/554#issuecomment-271579096

If you look at the history above, you will see that the issue was closed by #5746. If you open this PR, you will see that its milestone is set to 16.

So the fix will be in 16, and we can’t put it in 15.x because it introduces a breaking change in behavior.

I don’t know if it’s possible to backport it to 15.x. @jquense and @nhunzaker would likely be able to answer this.

React range input IE11 onChange or onInput workaround

1 Answers1