範囲値を表示する代わりに、値を使用して配列から要素を取得して表示する範囲スライダーを実装しました。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