Thank you for taking the time for reading my question.

A "range" input element in HTML (Slider) fires an onchange -event, in which the content of a span element gets updated with the current value of the input element.

Somehow, the first change made to the input element doesn't fire the onchange event. When an 'onclick' event is used, it does fire.

Here's the code, HTML first:

<div>

    <input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
    <span id="main_options_plug1_lengthPE_value"> … </span>

</div>

And now JavaScript:

function setOpenEndPELength(plug)
{
    if (plug == "plug1" || plug == "plug2")
    {
        var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
        var span = document.getElementById("main_options_" + plug + "_lengthPE_value");

        span.innerHTML = slider.value + " mm";
    }
}

I created a JSFiddle, so you can try it yourself.

I didn't find an answer to this question on stackoverflow so far, any questions i found were about onchange event don't firing at all. In this case, it's only the first change that doesn't work.

Hope someone knows the answer. Any help is greatly appreciated, thanks in advance.

Thank you for taking the time for reading my question.

A "range" input element in HTML (Slider) fires an onchange -event, in which the content of a span element gets updated with the current value of the input element.

Somehow, the first change made to the input element doesn't fire the onchange event. When an 'onclick' event is used, it does fire.

Here's the code, HTML first:

<div>

    <input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
    <span id="main_options_plug1_lengthPE_value"> … </span>

</div>

And now JavaScript:

function setOpenEndPELength(plug)
{
    if (plug == "plug1" || plug == "plug2")
    {
        var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
        var span = document.getElementById("main_options_" + plug + "_lengthPE_value");

        span.innerHTML = slider.value + " mm";
    }
}

I created a JSFiddle, so you can try it yourself.

I didn't find an answer to this question on stackoverflow so far, any questions i found were about onchange event don't firing at all. In this case, it's only the first change that doesn't work.

Hope someone knows the answer. Any help is greatly appreciated, thanks in advance.

• javascript
• html
• events
• onchange

• 3 The fiddle works as expected for me, but it's a bit hard to understand when it doesn't work (what does "It does an onclick event is used, it does fire" mean?) – JJJ Commented Dec 3, 2013 at 14:25
• 2 Are you actually changing the value or just clicking on it? What browser does the problem occur in? – epascarello Commented Dec 3, 2013 at 14:27
• @Juhana: I corrected it so it makes sense now. Sorry for the confusion :) – Jbartmann Commented Dec 3, 2013 at 14:27
• 1 Its working as expected. – Kishan Reddy Commented Dec 3, 2013 at 14:30
• @epascarello: the button on the slider is in another position than it is at the start, so i assume it is a change. I'm using Mozilla Firefox 25. – Jbartmann Commented Dec 3, 2013 at 14:31

3 Answers 3

If I understand the question correctly, the problem is that on Firefox, the onchange handler is not executed when you press down mouse button when the cursor is on the button of the slider and move the mouse. It is executed only after you release the mouse button after such a move.

This seems to be the correct behavior (though some other browsers don’t ply), since HTML5 CR says about the change event: “if the element does not have an activation behavior defined but uses a user interface that involves an explicit mit action, then any time the user mits a change to the element's value or list of selected files, the user agent must queue a task to fire a simple event that bubbles named change at the input element.”

That’s a bit plicated formulation, but it is followed by a clarifying example: “A third example of a user interface with a mit action would be a Range controls that use a slider. While the user is dragging the control's knob, input events would fire whenever the position changed, whereas the change event would only fire when the user let go of the knob, mitting to a specific value.”

The conclusion is that in this case, you should use the oninput attribute instead of onchange. In practice, onmousemove works too, but oninput is better, since it can be expected to work with input methods that do not use a mouse (whatever they might be, e.g. control by voice).

On document ready try to trigger event manually caused first time change is not occurred.

So just add code as below:

$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)

A little trick, if onchange doesn't fire the first time, add:

onclick="console.log(1)"

Some other action on the click, it still fire the onchange as second time but as first you have the click.