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;
}