Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

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

  • Last Updated : 21 Jun, 2019

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:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

<select onchange="function()">

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

Example:






<!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>

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:




<!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>

Output:
Before:

After:




My Personal Notes arrow_drop_up
Recommended Articles
Page :