Javascript code for Input range slider not working in internet explorer 11

Question

This is my html code

<input type="range" name="que1" min="0" max="100" value="0" class="slider" id="myRange">

And the javascript code for it is

var slider = document.getElementById('myRange')

function onChange(event) {
  var x = event.target.value

  if (x == 0) {
    slider.className = ''
  } else if (x > 30 && x < 60) {
    slider.className = 'MyClass-1'
  } else if (x == 100) {
    slider.className = 'MyClass-2'
  }
}

slider.addEventListener('input', onChange)

As I drag the slider , the value changes but the class is not adding according to the value, it works perfectly in chrome but not in internet explorer 11.

Any solution for this to achieve in ie11??

Answer 1

According to caniuse (see "Known issues"), IE10 and IE11 fire change, not input, on mouse actions. So you'll need to handle change as well as input.

slider.addEventListener('input', onChange)
slider.addEventListener('change', onChange) // For IE11