小编Ros*_*ell的帖子

html范围滑块 - oninput在IE 11中不起作用

我已经实现了一个范围滑块,它使用该值从数组中获取元素并显示该元素,而不是显示范围值.它适用于Chrome和Firefox但不适用于IE 11 - 当滑块移动时,该值不会获得更新的元素.

HTML:

<div id="yearSlider" style="z-index:2;">
  <form>
    <div align="center">
      <input 
        type="range" 
        min=1 
        max=10 
        value=0 
        id="fader" 
        step=1 
        oninput="outputUpdate(years[value])"
      >
      <output for=fader id=volume>1908</output>
    </div>
  </form>
Run Code Online (Sandbox Code Playgroud)

使用Javascript:

var years = [0,1908, 1910, 1912, 1915, 1920, 1935, 1949, 1982, 2005, 2015];

function outputUpdate(vol) {
  document.querySelector('#volume').value = vol;
}
Run Code Online (Sandbox Code Playgroud)

通过搜索,我发现这与"oninput"在IE中的工作原理(或不工作原理)有关.

我试着从这里加入解决方案

<input 
  type="range" 
  min="5" 
  max="10" 
  step="1" 
  oninput="showVal(this.value)" 
  onchange="showVal(this.value)"
>
Run Code Online (Sandbox Code Playgroud)

但它仍然没有更新.

我的jsfiddle

html javascript internet-explorer slider rangeslider

9
推荐指数
1
解决办法
5027
查看次数