Menu
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
462
Creating a Range Slider Step 1) Add HTML: Example <div class="slidecontainer"> <input type="range" min="1" max="100" value="50" class="slider"... Step 2) Add CSS: Example .slidecontainer { width: 100%; /* Width of the outside container */ } /* The slider itself */ . Step 3) Add JavaScript:
Although oninput doesn’t fire, the value of the slider is displayed in a native tooltip, which doesn’t happen on the other browsers. The keyboard likewise has no effect on the value and the native tooltip is not displayed. Works the same way as oninput in Chrome and Firefox; the value changes immediately while the slider is still moving.
The oninput event occurs when an element gets user input. This event occurs when the value of an <input> or <textarea> element is changed. Tip: This event is similar to the onchange event. The difference is that the oninput event occurs immediately after the value of an element has changed,...
Focusing and adjusting the slider with the keyboard has the same result. The change event does not fire immediately, demonstrated by the fact that the value on the page does not change until the slider stops moving. Keyboard interaction, however, is the same as oninput, with the value on the page updating immediately.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
