I have a slider (input type range) that is supposed to run a function when the value is being changed. The function should then display the new value in a separate div container. After placing an alert in the function, I know that the function isn't being called, but after googling for an hour and trying a few different methods I just can't find the error.
Here's the HTML part:
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>
JavaScript:
// Slider
function updateSlider(slideAmount)
{
alert("error");
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}
It works, you just need to make sure that the JavaScript function is defined when the element is rendered, for example:
<script>
function updateSlider(slideAmount) {
var sliderDiv = document.getElementById("sliderAmount");
sliderDiv.innerHTML = slideAmount;
}
</script>
<input id="slide" type="range" min="1" max="100" step="1" value="10" onchange="updateSlider(this.value)">
<div id="sliderAmount"></div>
See this demo: https://jsfiddle.net/Mmgxg/
A better way would be to remove the inline onchange
attribute:
<input id="slide" type="range" min="1" max="100" step="1" value="10">
<div id="sliderAmount"></div>
And then add the listener in your JavaScript code:
var slide = document.getElementById('slide'),
sliderDiv = document.getElementById("sliderAmount");
slide.onchange = function() {
sliderDiv.innerHTML = this.value;
}
https://jsfiddle.net/PPBUJ/
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