输入范围滑块的Javascript代码在Internet Explorer 11中不起作用

问题描述：

这是我的html代码

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

它的javascript代码是

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)

当我拖动滑块时，值会发生变化，但类未根据该值添加，它在chrome中完美运行，但在Internet Explorer 11中却无法正常运行.

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.

要在ie11中实现此目标的任何解决方案?

Any solution for this to achieve in ie11??

答

根据 caniuse (请参阅已知问题")，IE10和IE11在鼠标操作时触发change，而不是input.因此，您需要处理change和input.

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

输入范围滑块的Javascript代码在Internet Explorer 11中不起作用

相关推荐