Internet Explorer 11 css style of range slider

Question

I would like to style range slider with css but all examples I found are not styled in internet explorer 11 where slider looks like so:

Do you know how to style it and why only ie 11 show no style when defined?

Answer 1

IE11 gives you a few pseudo elements related to the range input, which you can read about here.

1. ::-ms-fill-lower controls styling of the sliders track before the slider thumb

2. ::-ms-fill-upper same as above, but after the thumb

3. ::-ms-thumb - for the slider thumb itself.

4. ::-ms-tooltip - controls styling of the tooltip of a slider

5. ::-ms-track styles the sliders individual tracks.

An example fiddle

::-ms-fill-lower {
    background: coral;
}

::-ms-fill-upper {
    background: peru;
}

::-ms-thumb {
    background: steelblue;
}

Answer 2

In addition to the 5 pseudo-elements mentioned by @adrift, there are 2 more related to ticks. So to recap:

1. ::-ms-fill-lower controls styling of the sliders track before the slider thumb
2. ::-ms-fill-upper same as above, but after the thumb
3. ::-ms-thumb the slider thumb itself.
4. ::-ms-tooltip controls styling of the tooltip of a slider
5. ::-ms-track styles the sliders individual tracks
6. ::-ms-ticks-before styles tick marks that appear before the track
7. ::-ms-ticks-after styles tick marks that appear after the track

Note that you can have 3 different sets of ticks (!): the track has its own set. Use color: transparent to hide.