Monday, March 12, 2012

Easy display value of slider in HTML5

In HTML5 we can display a slider as <input> with type="range". By default, there are no display for the select value. It's a easy way to add a <output> to update with the slider input.
(Not all browser supper slider input currently!)

Easy display value for of slider in HTML5, run at Google Chrome

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Mobile-Web-App: HTML5 input</title>

</head>
<body>
<h1>Mobile-Web-App: HTML5 input</h1>

<label for="rangeinput">Range</label>
<input id="rangeinput" type="range" min="0" max="10" value="5" onchange="rangevalue.value=value"></input>
<output id="rangevalue">5</output>

</body>
</html>


Posted by Unknown at 8:30 AM
Labels:

3 comments:

  1. Keshav AgrawalDecember 10, 2012 at 12:42 AM

    great :) answered my question ! Keep posting!

    ReplyDelete
  2. alrareaApril 22, 2013 at 10:41 PM

    great
    a little updation
    change output tag to
    input type="text" id="rangevalue" onchange="rangeinput.value=value"

    ReplyDelete
  3. JetisonDecember 29, 2013 at 5:59 AM

    Hate to be a stickler but there is not /input ..

    ReplyDelete

Subscribe to: Post Comments (Atom)