styling html5's range control

How can i st开发者_Python百科ylize html5's range control to like this screenshot

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.

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.