Geoffrey Lalloué Geoffrey Lalloué - 13 days ago 7
CSS Question

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

I have created a slider.

In chrome everything is working fine.See image below:
enter image description here

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

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

Problem is (indirectly) background-image on input :

<input name="perimeter" id="perimeter" style="background-image: -webkit-linear-gradient(left, transparent 0%, rgba(164, 223, 253, 0.8) 1%, rgba(164, 223, 253, 0.8) 25%, black 26%, black 100%);" type="range" min="0" max="4" step="1" value="1">

This background-image is necessary to set colors before and after thumb on Chrome and Safari.

To resolve problem, i need to set height value on css .form input[type=range].
But if i do it, background-image take all the height value. It's working on Chrome, but not on MS edge.

So, to resolve it, it's necessary to use MS Edge Browser specificities :

  1. Remove background-image on input.
  2. Add css styles : -ms-fill-lower and -ms-fill-upper to set colors before and after thumb

Result is :

<!-- Android & iOS -->
<input id="perimeter" type="range" min="0" max="4" step="1" style="background-image:-webkit-linear-gradient(left, transparent 0%, rgba(164,223,253,0.8) 1%, rgba(164,223,253,0.8) {{ perimeter *100 / (distances.length -1) | number:0 }}%, black {{ perimeter *100 / (distances.length -1) + 1 | number:0 }}%, black 100%)"/>
<!-- Windows -->
<input id="perimeter" type="range" min="0" max="4" step="1" style="height: 2.5rem;"/>

You need to condition input display. If you use angular, use ng-if to display first input only on android and ios, and second on windows.

and less file is :

@thumb-color: white;
@thumb-radius: 50%;
@thumb-height: 2.5rem;
@thumb-width: 2.5rem;

@track-width: 100%;
@track-height: 3px;
@track-fill-lower-color: rgba(164,223,253,0.8);
@track-fill-upper-color: black;

.track() {
    -webkit-appearance: none;
    width: @track-width;
    height: @track-height;
    cursor: pointer;
}

.thumb() {
    -webkit-appearance: none;
    border: none;
    height: @thumb-height;
    width: @thumb-width;
    border-radius: @thumb-radius;
    background: @thumb-color;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px grey, 0 2px 4px rgba(0, 0, 0, .2);
}

input[type=range] {
  -webkit-appearance: none;
  margin: @thumb-height/2 0;
  width: @track-width;

  &::-webkit-slider-runnable-track {
    .track();
    border: none;
  }

  &::-webkit-slider-thumb {
    .thumb();
    -webkit-appearance: none;
    margin-top: -1.25rem; // @thumb-height / 2
  }

  &::-moz-range-track {
     .track();
     border: none;
  }
  &::-moz-range-thumb {
     .thumb();
  }

  &::-ms-track {
    .track();
    background: transparent;
    color: transparent;
  }
  &::-ms-thumb {
    .thumb();
  }
  &::-ms-fill-lower {
    background: @track-fill-lower-color;
  }
  &::-ms-fill-upper {
    background: @track-fill-upper-color;
  }
}