HTML5 input type range show range value

by

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">
<output>24</output>

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.

More Related Contents:

  1. How to design an HTML/CSS signature that will work in Outlook 2016? [duplicate]
  2. How to align 3 divs (left/center/right) inside another div?
  3. Styling an input type=”file” button
  4. CSS: Width in percentage and Borders
  5. Why does z-index not work?
  6. CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
  7. :after and :before CSS pseudo elements hack for Internet Explorer 7
  8. Extend bootstrap row outside the container
  9. html/css hexagon with image inside
  10. CSS image resize issue
  11. Floating an image to the bottom right with text wrapping around
  12. Inline tags vs. inline css properties
  13. Remove border from IFrame
  14. Why are my div margins overlapping and how can I fix it?
  15. Draw triangle in corner of div
  16. Flexbox resize and scrollable overflow [duplicate]
  17. How do I make Firefox auto-refresh on file change?
  18. Second line in li starts under the bullet after CSS-reset
  19. How to prevent line break at hyphens in all browsers
  20. Can I override inline !important?
  21. CSS property as SASS mixin value [duplicate]
  22. Preserve line breaks in textarea
  23. How position absolute and fixed block elements get their dimension?
  24. Ring-shaped process spinner with fading gradient effect around the ring
  25. Why is there a default margin on the element? [closed]
  26. set css border to end in a 90 instead of a 45 degree angle
  27. How To Add CSS3 Transition With HTML5 details/summary tag reveal?
  28. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  29. Changing image src depending on screen size
  30. Balanced text wrapping in HTML

Leave a Comment