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

本文介绍了输入范围滑块的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中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！