HTML5 input type range show range value

For those who are still searching for a solution without a separate javascript code. There is little easy solution without writing a javascript or jquery function:

<input type="range" value="24" min="1" max="100" oninput="this.nextElementSibling.value = this.value">

JsFiddle Demo

If you want to show the value in text box, simply change output to input.

Point to note:
It is still Javascript written within your html, we can write something like below in js to do similar thing:

 document.registrationForm.ageInputId.oninput = function(){
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value;

Instead of element’s id, name could also be used, both are supported in modern browsers.

Leave a Comment