Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to trigger the onchange event on input type=range while dragging in Firefox?
The range input allows a selection of any value between the particular range of values. Using JavaScript, we can get the input value that users have entered in the range input.
The onchage event triggers only when the user releases the mouse key. So, it will not update the value while dragging the range slider. You can face this problem in all browsers, such as chrome, safari, but not only in Firefox.
Users can follow the example below to check whether the input value is updated while dragging the range input.
Example 1 (Input values will not update while dragging the range input)
In the example below, we have created the range input. Also, we have added an onchange event in the range input. Users can observe that it updates the value only whenever we release the mouse click but not while dragging the range input.
<html>
<body>
<h2> Using the <i> onchange() event </i> to update the range values. </h2>
<input type = "range" min = "1" max = "10" step = "1" onchange = "changeValue(this.value)">
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
function changeValue(newVal) {
output.innerHTML = newVal;
}
</script>
</body>
</html>
The above code updates the input value once the user releases the mouse click. It’s not a good idea to update the range after dragging only. We need to implement the code in such a way that it also updates the range value while dragging the range input.
We can use the oninput event to update the value of range input while dragging it rather than using the onchange event.
Use the oninput event with input type=range
The oninput event will trigger whenever a user changes the value in the range input, triggering continuously while the user drags the range input.
Syntax
Users can follow the syntax below to use the oninput event attribute with the input type=range.
<input type = "range" min = "0" max = "50" step = "5" oninput="changeValue(this.value)">
In the above syntax, we invoke the function whenever the input event triggers.
Example 2
In the example below, we have created the range input, which allows users to select any value between 0 and 50. Also, we have added the steps attribute in the range input, allowing users to select only a multiple of 5.
We also added the oninput attribute, which calls the changeValue() function whenever the user drags the range input. In the output, users can observe that it updates the selected value below the range input while the user drags the range input.
<html>
<body>
<h2> Using the <i> oninput() event </i> to update the range values. </h2>
<input type = "range" min = "0" max = "50" step = "5" oninput = "changeValue(this.value)">
<div id = "output"> </div>
</body>
<script>
let output = document.getElementById('output');
function changeValue(newVal) {
output.innerHTML = "The selected input value in the range input is " + newVal;
}
</script>
</html>
Example 3
In the example below, we have accessed the range input in JavaScript via its id. After that, we added the input event on the range input using the addEventListner() method. Inside the addEventListnerMethod(), we get the event object. Also, we access the targeted element’s value using the event.target.value and update the new value in the HTML document.
In the output, users can observe that the below code also updates the range input value while dragging the range input.
<html>
<body>
<h2> Using the <i> oninput() event </i> to update the range values. </h2>
<input type = "range" min = "0" max = "100" step = "10" id = "range_input">
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let input = document.getElementById('range_input');
input.addEventListener('input', (event) => {
// event.target returns the targetted element on which the input event is triggered.
// event.target.value returns the value of the targetted element
output.innerHTML = "The selected input value in the range input is " + event.target.value;
})
</script>
</body>
</html>
Programmers learned to update the range input value while dragging it. If we don’t update the range input value while dragging it, users can’t estimate which value they have selected and how far they are from the targeted value. So, it’s necessary to update the values while dragging the range input using the input event.
7K+ Views
