::-ms-thumb appears behind track in MS Edge
<p>I have created a slider.</p>

<p>In chrome everything is working fine.See image below:
<a href="https://i.stack.imgur.com/En5ny.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/En5ny.png" alt="enter image description here"></a></p>

<p>But in MS Edge, thumb appears behind track. See image below:
<a href="https://i.stack.imgur.com/fk5Es.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fk5Es.png" alt="enter image description here"></a></p>

<p>I created a codepen to explain and show my problem : <a href="https://codepen.io/glalloue/pen/QGKqNd" rel="nofollow noreferrer">https://codepen.io/glalloue/pen/QGKqNd</a></p>

<p>Css(less) applied :</p>

<pre><code>.form input[type=range] {
    z-index: 1;
    align-self: stretch;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    margin: 0;
    &amp;::-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);
    }
    &amp;::-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);
    }
}
</code></pre>

<p>Here is a similar question with internet explorer : <a href="https://stackoverflow.com/questions/30011717/ms-thumb-appears-behind-track">::-ms-thumb appears behind track</a><br>
Suggested solution was to add margin to ::-ms-track but without success.</p>

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