How to trigger onchange event on input type=range while dragging in Firefox ?

Onchange: Onchange executes a JavaScript when a user changes the state of a select element. This attribute occurs only when the element becomes unfocused.

Syntax:

<select onchange="function()">

Attribute Value: It works on <select> element and fires the given JavaScript after the value is committed.



Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Onchange</title>
    <script type="text/javascript">
        function Optionselection(select) {
            var chosen = select.options[select.selectedIndex];
            alert("Option Chosen by you is " + chosen.value);
        }
    </script>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <p>Choose an option from the following:</p>
        
        <select onchange="Optionselection (this)">
            <option value="C++" />C++
            <option value="Java" />Java
            <option value="Python" />Python
        </select>
    </center>
</body>
  
</html>

chevron_right


Output:
Before:

After:

It is a frequent UI design for a range slider to showcase the immediate change in the depicted value as the user moves the slider. This is not the case for the above-mentioned browser (chrome included).
Although, one could argue that Firefox showcases the correct behavior because the onchange event executes only when the control loses focus (be it mouse drag or keyboard). But in order to display the changing value along with the moving slider, one needs to apply the oninput event attribute.

Oninput: Much like the onchange event, this attribute works when it receives user input value. The main difference being its immediate execution when the value of element changes.

Syntax:

<element oninput = "script">

Program to illustrate Solution:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>onchange event on input type=range</title>
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <p>onchange event on input "type=range"</p>
  
        <span id="value"></span>
        <input type="range" 
               min="1"
               max="10" 
               step="1" 
               oninput="DisplayChange(this.value)">
        <script>
            function DisplayChange(newvalue) {
                document.getElementById(
                  "value").innerHTML = newvalue;
            }
        </script>
    </center>
</body>
  
</html>

chevron_right


Output:
Before:

After:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.