How to show range value with HTML5 input type range with JavaScript?

Spread the love

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.

Leave a Reply

Your email address will not be published.