Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to trigger the onchange event on input type=range while dragging in Firefox?
The range input allows users to select any value within a specified range. By default, the onchange event only triggers when the user releases the mouse, not during dragging. This creates poor user experience as users can't see real-time value updates.
The onchange event triggers only when the user releases the mouse button, so it won't update the value while dragging the range slider. This behavior occurs in all browsers, including Firefox, Chrome, and Safari.
Let's examine this problem and explore the solution using the oninput event.
Problem: onchange Event Limitation
In this example, the range input uses the onchange event. Notice that the value updates only when you release the mouse, not during dragging.
<html>
<body>
<h2>Using the onchange event to update range values</h2>
<input type="range" min="1" max="10" step="1" onchange="changeValue(this.value)">
<div id="output">Value will appear here</div>
<script>
let output = document.getElementById('output');
function changeValue(newVal) {
output.innerHTML = "Selected value: " + newVal;
}
</script>
</body>
</html>
Solution: Using the oninput Event
The oninput event triggers continuously while the user drags the range slider, providing real-time value updates.
Syntax
<input type="range" min="0" max="50" step="5" oninput="changeValue(this.value)">
Method 1: Inline oninput Event
This example uses the oninput event with step increments of 5. The value updates in real-time as you drag the slider.
<html>
<body>
<h2>Using the oninput event to update range values</h2>
<input type="range" min="0" max="50" step="5" oninput="changeValue(this.value)">
<div id="output">Drag the slider to see real-time updates</div>
<script>
let output = document.getElementById('output');
function changeValue(newVal) {
output.innerHTML = "Current value: " + newVal;
}
</script>
</body>
</html>
Method 2: Using addEventListener
This approach uses addEventListener to attach the input event programmatically, providing more flexibility and better separation of HTML and JavaScript.
<html>
<body>
<h2>Using addEventListener for input event</h2>
<input type="range" min="0" max="100" step="10" id="rangeInput">
<div id="output">Move the slider to see updates</div>
<script>
let output = document.getElementById('output');
let input = document.getElementById('rangeInput');
input.addEventListener('input', (event) => {
// event.target returns the element that triggered the event
// event.target.value returns the current value
output.innerHTML = "Selected value: " + event.target.value + "%";
});
</script>
</body>
</html>
Comparison of Events
| Event | Triggers During Drag? | Use Case |
|---|---|---|
onchange |
No - only on release | Final value confirmation |
oninput |
Yes - continuous updates | Real-time value display |
Browser Compatibility
The oninput event is supported in all modern browsers, including Firefox, Chrome, Safari, and Edge. It provides consistent behavior across all platforms.
Conclusion
Use the oninput event instead of onchange for range inputs to provide real-time value updates during dragging. This creates a better user experience by showing immediate feedback as users interact with the slider.
12K+ Views
