How to style <input type='range' /> in IE10

Question

I want to style the <input type='range' /> element in IE10.

By default, IE 10 style the element like this:

I want to customize it a bit, say, changing the color blue to red, grey to black, the little bars to yellow, the little black scrubber to white. I tried overwriting the background-color property and the color property in CSS. But it didn't work.

Any ideas?

Answer 1

You can use the Microsoft CSS pseudo elements:

• ::-ms-fill-lower
• ::-ms-fill-upper
• ::-ms-thumb
• ::-ms-ticks-before
• ::-ms-ticks-after
• ::-ms-ticks
• ::-ms-tooltip

Here the full Microsoft pseudo list...

IE10

Here is a page with styled IE10 range controls (Open with IE10)

WebKit

WebKit shadow DOM

Other browsers

How to style range control for multiple browsers

A Sliding Nightmare

Answer 2

There are a number of pseudo elements you can use to style range controls in IE10.

input[type="range"]::-ms-fill-upper {
    background-color: green;
}

Will colour the part after the thumb. To style before the thumb use:

 input[type="range"]::-ms-fill-lower {
    background-color: lime green;
}

See for example http://jsfiddle.net/K8WyC/4/

To style the thumb you can use ::-ms-thumb, while the tick marks can be styled with ::-ms-ticks-before, ::-ms-ticks-after, or ::-ms-track (the latter styles both sides). You can find out more about the various pseudo-elements for controls at http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx

The styles you are asking for can be achieved like in the following fiddle: http://jsfiddle.net/K8WyC/8/