input type="range" and Android's stock browser.

This post is more than ten years old. It is no longer accurate.

Android's stock browser supports the range input type, but in versions 3.x4.x and below (not sure about Android 4.x), it doesn't actually display the UI.

It does, however, support parts of the Shadow DOM. That means we can style this element, and give our users a visible control.

The image below shows a rather garish green-and-orange version of the range user interface widget. This is after adding some styling, as it appears in the stock Android browser.

And below is the CSS that gives us the above image.

input[type='range']{
    background: #0c0;
    height:10px;
}

input[type='range']::-webkit-slider-thumb{
    background:#f60;
    height:30px;
    width:30px;
    border-radius: 30px;
}

To date, this does not affect Chrome or Safari for the Desktop. ::-webkit-slider-thumb does partially affect iOS Safari. I've included an image of what it looks like below (not to scale). Notice that the thumb color changes, but the slider background does not.

This may also affect other browsers that use Webkit such as the Web Browser for S60 Nokia and Samsung's Dolfin. I haven't tested it yet, but if you have, please let us know in the comments.

Also keep in mind that this element has a pretty poor user interaction in Android browser. It's not very responsive, and doesn't operate all that intuitively. This is true of most mobile browsers, but in my opinion (and based on limited experience), Android is worst of all.