9

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

Javascript：

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

function outputUpdate(vol) {
  document.querySelector('#volume').value = vol;
}

通过搜索，我发现这与“oninput”在 IE 中的工作方式（或不工作方式）有关。

我尝试从这里合并解决方案

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

但它仍然没有更新。

我的jsfiddle

4

1 回答 1

1

您可以使用以下代码获取滑块：

<body>
    <div id="yearSlider" style="z-index:2;">
            <form>
              <div align="center">
                <input 
                  type="range" 
                  min=1 
                  max=10 
                  value=0 
                  id="fader" 
                  step=1 
                  onchange="outputUpdate(value)"
                >
                <span for=fader id=volume>1908</span>
              </div>
            </form>
        </div>
        <script>
            var years = [0,1908, 1910, 1912, 1915, 1920, 1935, 1949, 1982, 2005, 2015];

            function outputUpdate(vol) {
            document.getElementById('volume').innerHTML=years[vol];
            }
        </script>

于 2018-10-10T10:02:37.037 回答