html range slider - oninput does not work in IE 11

I have implemented a range slider that uses the value to get an element from an array and display that, instead of displaying the range value. It works in Chrome and Firefox but not IE 11 - the value does not get the updated element when the slider moves.

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

By searching I see that this has something to do with how "oninput" works (or doesn't) in IE.

I tried incorporating the solution from here

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

but it still didn't update.

My jsfiddle

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

Recommended topics

Hot tags