Styling input type range in IE

Input type range is supported in IE10 and above[1]. For IE9 and the rest the range input will default to a input type text.

The default input type range in IE

What we are aiming to get at

First thing we want to change is the track element. This is the area in which the thumb (or handler of the input) slides. The trick is to set the color & background of this area to the same color this way you also get rid of the vertical ruler lines.

input[type=range]::-ms-track // to target it

input[type=range]::-ms-track {
  background: #ddd;
  color: #ddd;
}

Important notice: do not group pseudo selectors with browser prefixes together. So things like ::-ms-track & ::-webkit-slider-thumb should be separate even if they share the same CSS rules because browsers will invalidate the pseudo selector they do not recognize and in turn invalidate the whole CSS block.

Next we want to style the thumb (the handler of the input)

input[type=range]::-ms-thumb // to target it

The only downside I discovered with this element is that the handler is inside the track element and cannot overflow it. That means the thumb is always as big as the track element permits it.

You can also target for active state. This would highlight your handler as you drag it

input[type=range]:active::-ms-thumb // to target it

For a complete working example http://codepen.io/piatra/full/sDipn
The demo also includes CSS for Chrome & Firefox.

Happy hacking!

[1] http://caniuse.com/#feat=input-range