:: - ms-thumb появляется за дорожкой в ​​MS Edge

Question

Я создал слайдер.

В хромированном все работает fine.See изображение ниже:

Но в MS Edge, большой палец появляется позади дорожки. Смотрите изображение ниже:

Я создал codepen, чтобы объяснить и показать мою проблему: https://codepen.io/glalloue/pen/QGKqNd

Css (меньше) применяется:

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

Вот аналогичный вопрос с Internet Explorer: ::-ms-thumb appears behind track
Предлагаемое решение заключалось в добавлении маржи в :: - ms-track, но без успеха.

Есть ли способ сделать мой :: - ms-thumb в MS-edge выглядеть точно так же, как на хроме?

Answer 1

Проблема (косвенно) background-image на входе:

<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"> 

Это background-image необходимо установить цвета до и после того, как большой палец на Chrome и Safari.

Чтобы решить проблему, мне нужно установить значение высоты на css .form input[type=range].
Но если я это сделаю, фоновое изображение примет все значение высоты. Работает на Chrome, но не на границе MS.

Таким образом, чтобы решить это, необходимо использовать особенности браузера MS Edge:

1. Удалить background-image на входе.
2. стили Добавить CSS: -ms-fill-lower и -ms-fill-upper, чтобы установить цвета до и после того, как большой палец

Результат:

<!-- 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;"/> 

Вам необходимо кондиционировать входной дисплей. Если вы используете угловой, используйте ng-if, чтобы отображать первый вход только на Android и ios, а второй на окнах.

и меньше файла:

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