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

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/