styling html5's range control

Question

How can i stylize html5's range control to like this screenshot

Answer 1

You should take a look at the w3c article on "A vocabulary and associated APIs for HTML and XHTML" and scroll to: 4.10.7.1.14 Range state.

And check this out: jQuery style-able Range controls.

Edit:

After your comment, see this in the article I linked:

HTML:

<input type="range" min="-100" max="100" value="0" step="10" name="power" list="powers">
<datalist id="powers">
 <option value="0">
 <option value="-30">
 <option value="30">
 <option value="+50">
</datalist>

CSS:

input { height: 75px; width: 49px; background: #D5CCBB; color: black; }

Attempted at: jsFiddle.net.

In chrome it appears as a horizontal range with no styles, in Opera as vertical range with no styles. in Firefox it appears as a textarea element with styles applied. I can't check IE because the download of IE9 broke it.

Answer 2

You can't really do that. The spec doesn't define any formatting options. Live with the default look, or build your own using Javascript.