Range slider input event not firing in IE 10

Question

I have a range slider and I want to listen to its change and input events. This works fine in most browsers, but in IE 10, there is no input event firing and change fires over and over like input is supposed to. Here is the code:

html:

<input id="slider" type="range" />

js:

window.addEventListener('load', function() {

  var input = document.getElementById('slider');

  input.addEventListener('input', function(e) {
    console.log('input');
  });

  input.addEventListener('change', function(e) {
    console.log('change');
  });

});

And here it is on codepen: http://codepen.io/ZevanRosser/pen/YPQVzJ

I'm wondering if there is a workaround for this - a polyfill or some simple trick.

Answer 1

So I figured this out a few days ago and figured I'd post my solution. Basically the trick is to check if you're in IE (using your sniffing method of choice). Then hijack the change event for range inputs and fire an input instead. Then, fire a change on mouseup. This seems to work great so far:

(here's a pen http://codepen.io/ZevanRosser/pen/pvWzej)

window.addEventListener('load', function() {

  var input = document.getElementById('slider');

  input.addEventListener('input', function(e) {
    console.log('input');
  });

  input.addEventListener('change', function(e) {
    console.log('change');
  });

  var fixInputAndChangeEvents = function() {
    var currentSlider;
    var fireChange = function(e) {
      var changeEvent = document.createEvent('Event');
      changeEvent.initEvent('change', true, true);

      changeEvent.forceChange = true;
      currentSlider.dispatchEvent(changeEvent);
    };

    document.addEventListener('change', function(e) {
      var inputEvent;
      if (!e.forceChange && e.target.getAttribute('type') === 'range') {
        e.stopPropagation();
        inputEvent = document.createEvent('Event');
        inputEvent.initEvent('input', true, true);

        e.target.dispatchEvent(inputEvent);

        currentSlider = e.target;
        document.removeEventListener('mouseup', fireChange);
        document.addEventListener('mouseup', fireChange);
      }

    }, true); // make sure we're in the capture phase
  };

  var isIE = function() {
    var userAgent = navigator.userAgent;
    return userAgent.indexOf('MSIE') !== -1 ||  
      userAgent.indexOf('Trident') !== -1;
  };

  if (isIE()) {
    fixInputAndChangeEvents();
  }

});

There are a few things I changed in the actual version I used on the project I'm working on.

1. The project uses lodash so at the request of another developer I partialized the fireChange event and passed the current range input as the first argument rather than just using the currentSlider variable. This is basically to avoid collisions - pretty sure a collision isn't possible since you can only slide one slider at a time, but we figured better be safe than sorry.

2. The project already had IE sniffing, so I used what was already there over what you see here.

It would be nice to somehow figure out if this event behavior exists rather than sniffing for IE, but I couldn't quite figure out how to determine if the event flaw was present.

Anyway, hope that helps if someone else encounters this problem. I think there is still some room for improvement but this works good enough for now.