HTML5 Slider with onchange function

Question

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

Matthias Braun · Accepted Answer · 2021-11-28 11:48:08Z

32

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/

edited Nov 28, 2021 at 11:48

Matthias Braun

34.8k27 gold badges158 silver badges177 bronze badges

answered Dec 15, 2012 at 22:23

David Hellsing

109k44 gold badges181 silver badges214 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sebastián Grignoli Over a year ago

You don't even need to worry about the function definition being above the element. First of all, when the element is rendered the function won't be called, only when you move the slider it will.

Sebastián Grignoli Over a year ago

Second, when you define a function with the "function name(){}" syntax, it's definition gets "moved" by the parser to the top of the scope, prior to the execution of the script. That is not the case when you define the function with the "name = function(){}" alternative syntax. In that case the definition stays in it's place and the function only exists after the execution of that line.

Ruben Martinez Jr. Over a year ago

Hi, wondering how to make event fire during change instead of after change? Is this possible?

Rickard Over a year ago

@RubenMartinezJr. I found this question having the same problem, i found that using oninput instead of onchange makes it fire as soon as the slider is moved, at least in current version of chrome

Mike 'Pomax' Kamermans Over a year ago

note that in 2020, the advice would be to use addEventListener(input, evt => ...) instead, as "on..." event handling was becoming legacy in 2012, but has since firmly become a pattern to avoid. Also note the use of the input rather than change event, as input fires continuously as you move a slider, whereas change fires once you let go.

Collectives™ on Stack Overflow

HTML5 Slider with onchange function

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related