Internet Explorer 11 css style of range slider

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

To get these looking as close as possible, I combined some of the answers above. The only "extra" is that IE has a track fill "upper" and "lower" not available in Fox, Safari, Chrome, and Edge.

.slider {
        /* Chrome, Edge */
        -webkit-appearance: none;
    }

    .slider:focus {
        /* Eliminates focus on Chrome, Edge */
        outline: none;
    }

    .slider::-webkit-slider-runnable-track {
        /* Chrome, Edge */
        background: rgb(239, 239, 239);
        border: 1px solid rgb(178, 178, 178);
        border-radius: 25px;
        cursor: pointer;
        height: 8px;
    }

    .slider::-webkit-slider-thumb {
        /* Chrome, Edge thumb */
        -webkit-appearance: none;
        background: rgb(7, 114, 251);
        border: 0px;
        border-radius: 16px;
        cursor: pointer;
        height: 16px;
        margin-top: -5px;
        width: 16px;
    }

    .slider::-moz-range-track {
        /* FF Range track */
        background: rgb(239, 239, 239);
        border: 1px solid rgb(178, 178, 178);
        border-radius: 25px;
        cursor: pointer;
        height: 8px;
    }

    .slider::-moz-range-thumb {
        /* FF Range thumb */
        background: rgb(7, 114, 251);
        border: 0px;
        border-radius: 16px;
        cursor: pointer;
        height: 16px;
        width: 16px;
    }

    .slider::-ms-track {
        /* IE Range track */
        background: transparent;
        border-color: transparent;
        border-width: 5px 0; /* allows taller thumb */
        color: transparent;
        height: 8px;
    }

    .slider::-ms-thumb {
        /* Thumb */
        background: rgb(7, 114, 251);
        border: 0px;
        border-radius: 16px;
        height: 16px;
        width: 16px;
    }

    .slider::-ms-fill-lower {
        /* IE Range lower fill */
        background: rgb(7, 114, 251);
        border: 1px solid rgb(62, 116, 184);
        border-radius: 50px;
    }

    .slider::-ms-fill-upper {
        /* IE Range upper fill */
        background: rgb(239, 239, 239);
        border: 1px solid rgb(178, 178, 178);
        border-radius: 50px;
    }

    .slider::-ms-tooltip {
        /* IE Range upper fill */
        display:none;
    }

Here's the range itself -- note there are two bootstrap classes to remove padding and set width --

<input type="range" min="1" max="100" value="50" class="slider p-0 w-100" />

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.