我已经实现了一个范围滑块,它使用该值从数组中获取元素并显示该元素,而不是显示范围值.它适用于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