html range slider - oninput does not work in IE 11

Question

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

IE triggers only [change event](https://msdn.microsoft.com/en-us/library/hh773065%28v=vs.85%29.aspx) when changing range. Another thing, `` is [not supported in IE](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output#Browser_compatibility), use `span` instead. [A fiddle](http://jsfiddle.net/wg2sbucr/) working with IE. — Teemu, Dec 12 '15 at 23:48
@Teemu, why not convert your comment into answer? Its duplicate to [this question](http://stackoverflow.com/questions/35033635/javascript-and-class-class-input-range-doesnt-work-in-ie) anyway. — chenz, May 30 '16 at 21:10

score 1 · Answer 1 · answered Oct 10 '18 at 10:02

You can use the below code to get the slider:

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

html range slider - oninput does not work in IE 11

1 Answers1