Sometimes, we want to show range value with HTML5 input type range with JavaScript.
In this article, we’ll look at how to show range value with HTML5 input type range with JavaScript.
How to show range value with HTML5 input type range with JavaScript?
To show range value with HTML5 input type range with JavaScript, we set the value
property of another input to the value of range input.
For instance, we write
<input
type="range"
name="rangeInput"
min="0"
max="100"
onchange="updateTextInput(this.value);"
/>
<input type="text" id="textInput" value="" />
to add 2 inputs.
We call the updateTextInput
with the range input’s value when we change its value.
Then we write
function updateTextInput(val) {
document.getElementById("textInput").value = val;
}
to define the updateTextInput
function.
In it, we get the text input with getElementById
.
And we set its value
property toi the range input’s value val
.
Conclusion
To show range value with HTML5 input type range with JavaScript, we set the value
property of another input to the value of range input.