:: - ms-thumb erscheint hinter Spur in MS Edge

Question

Ich habe einen Schieberegler erstellt.

In Chrom alles funktioniert fine.See Bild unten:

Aber in MS Rand, Daumen erscheint hinter Spur. Siehe Bild unten:

ich eine codepen geschaffen zu erklären und zu zeigen, mein Problem: https://codepen.io/glalloue/pen/QGKqNd

Css (weniger) angewandt:

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

Hier ist eine ähnliche Frage mit dem Internet Explorer: ::-ms-thumb appears behind track
Vorgeschlagene Lösung war das Hinzufügen von Marge zu :: - ms-track, aber ohne Erfolg.

Gibt es eine Möglichkeit, meine :: - ms-thumb in MS edge genau so zu machen wie auf chrome?

Answer 1

Problem ist (indirekt) background-image auf Eingang:

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

Diese background-image notwendig ist, Farben vor und nach dem Daumen auf Chrome und Safari zu setzen.

Um das Problem zu lösen, muss ich Höhe Wert auf css .form input[type=range] setzen.
Aber wenn ich es tue, nehme Hintergrund-Bild den ganzen Höhenwert. Es funktioniert auf Chrome, aber nicht auf MS Edge.

So lösen sie, ist es notwendig, MS Edge-Browser Spezifitäten zu verwenden:

1. entfernen background-image auf Eingabe.
2. Add CSS-Stile: -ms-fill-lower und -ms-fill-upper Farben setzen vor und nach dem Daumen

Ergebnis ist:

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

Sie müssen Eingabe-Anzeige konditionieren. Wenn Sie angular verwenden, verwenden Sie ng-if, um die erste Eingabe nur für Android und iOS und die zweite für Windows anzuzeigen.

und weniger Datei ist:

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