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.
