CODEWITHSUNDEEP
javascripthtmlinternet-explorersliderrangeslider
Rosie Bell
Rosie Bell

Reputation: 101

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

Upvotes: 9

Views: 6938

Answers (1)

Nicky Prusty
Nicky Prusty

Reputation: 108

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>

Upvotes: 1

Related Questions