onChange doesn't work on IE for type=range

[kud]

I don't know yet if I'm a newbie or it is a bug but onChange event on <input type="range"> doesn't work on IE (even 11).

Here an example of my code:

<input onChange={this.changeVolume} onMouseUp={this.changeVolume} ref="volumeSlider"  type="range" min={0} max={1} step={.1} value={this.state.volume} title="Sound" />

Yes, I use onMouseUp as crap patch.

[kud]

I've tried with integer instead of float, it did the same. In fact, onChange never fires on IE.

[petehunt]

Can you confirm that this fiddle is broken? http://jsfiddle.net/sua850oc/

[lionelB]

Hi,
it's broken on windows 7 for IE 11 (also IE10 using ie devtools)
working on latest FF and chrome

[zpao]

@syranide, any interest in taking this on? I think we probably might just need to handle a different event for ranges (like we use clicks for checkboxes)

[kud]

Windows 7, Internet Explorer 11

[kud]

Oh and onClick or onMouseUp work well. But it's not updated on every step. It's updated at the end of the user's choice.

[syranide]

@zpao I haven't really done much actual event normalization so this feels somewhat alien to me, I believe @spicyj made the amazing onChange implementation for inputs?

[sophiebits]

@kud Can you try a native input event listener?

[jquense]

I just checked in IE11 and the native change event fires just fine as you drag. The React onChange does not seem too fire at all though.

input doesn't fire at all

http://jsfiddle.net/sua850oc/7/

[jquense]

@spicyj It seems that the input event does not fire for range types in IE, which is what react is trying to use, The issue seems to be that this check fails in IE but not chrome/ff. Not sure how ya'll do checks like this, but you could change ChangeEventPlugin to include a (elem.nodeName === 'INPUT' && elem.type === 'range' && isIE) sort of check to make sure it uses change event

Addendum: this also seems to be the case for ie10

[rickbeerendonk]

All browsers behave different and React is not behaving like one of the browsers (and is even inconsistent between browsers).

	IE 11	Chrome 40	Firefox 34	React 12.2 in IE 11	React 12.2 in Chrome 40	React 12.2 in Firefox 34
drag	onchange (once per step)	oninput (once per step)	oninput (once per step)		oninput + onchange (once per step)	oninput + onchange (once per mouse move)
drag end		onchange	onchange
key left/right/up/down	onchange	oninput + onchange	oninput		oninput + onchange	oninput + onchange

CodePen: http://codepen.io/rickbeerendonk/pen/vEdBmm

---

Interesting thread: https://bugzilla.mozilla.org/show_bug.cgi?id=853670

[sophiebits]

@xymostech Here's the bug I mentioned to you yesterday, if you're interested – it involves working on ChangeEventPlugin so that we can listen to both the input and change events for range inputs. The current code structure isn't super amenable to this change, but it should be possible with a little refactoring.

[sophiebits]

(Dupe of #554.)

[jaygood]

Hey @spicyj ,

Was this supposed to be fixed in #554? I'm using ie 11 with react 15.3 and it looks like the issue still persists. Neither onChange nor onInput is being called at any point in the lifecycle of the drag.

https://jsfiddle.net/m78g29m5/

[maxdeviant]

@jaygood I ran into the same issue.

It looks like it will be fixed in React v16 (source).

[saawsan]

Hi,
I recently came across this issue too. Is there any local patch that could help us while waiting for a public fix (apparently on React v15.5 or v16)?

[c0debreaker]

Glad I saw this thread. My app is on React 15.5.4. I'm encountering it too on my Windows phone. User-agent is Mozilla/5.0 (Windows Phone 8.1;ARM;Trident/7.0;Touch;rv:11.0; IEMobile/11.0;NOKIA;Lumia 920) like Gecko

[NullVoxPopuli]

https://www.netmarketshare.com/operating-system-market-share.aspx?qprid=8&qpcustomd=1