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:

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