::-ms-thumb appears behind track in MS Edge

Question

I have created a slider.

In chrome everything is working fine.See image below:

But in MS Edge, thumb appears behind track. See image below:

I created a codepen to explain and show my problem : https://codepen.io/glalloue/pen/QGKqNd

Css(less) applied :

.form input[type=range] {
    z-index: 1;
    align-self: stretch;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    margin: 0;
    &::-webkit-slider-thumb {
        -webkit-appearance: none;
                appearance: none;
        border: none;
        width: 2.5rem;
        height: 2.5rem;
        background-color: white;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px #cccccc, 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    &::-ms-thumb {
        appearance: none;
        border: none;
        width: 2.5rem;
        height: 2.5rem;
        background-color: pink;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px #C0C0C0, 0 2px 4px rgba(0, 0, 0, .2);
    }
}

Here is a similar question with internet explorer : ::-ms-thumb appears behind track
Suggested solution was to add margin to ::-ms-track but without success.

Is there any way to do my ::-ms-thumb in MS edge look exactly the same as it is on chrome?

Answer 1

In my case removing background-image and defining lower and upper backgrounds didn't work. So if anybody is still looking for it, this is what worked in my case.

The problem was the height of the range element. It is set as 2px and range track height 2.5em.

Here's a Codepen demo with a working example in the edge https://codepen.io/piyukore06/pen/abbqJGK?editors=1111