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;
}

検索すると、これはIEで「oninput」がどのように機能するか(または機能しないか)に関係があることがわかります。

ここからソリューションを組み込んでみました

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

しかし、それはまだ更新されませんでした。

私のjsfiddle

4

1 に答える 1