:: - MS-thumbがMS Edgeのトラックの後ろに表示されます

Question

私はスライダーを作成しました。クロムすべてで

はfine.Seeイメージを働いているの下：

しかし、MSエッジで、親指がトラックの後ろに表示されます。私は私の問題を説明し、表示するためにcodepenを作成

：下の画像を参照してくださいhttps://codepen.io/glalloue/pen/QGKqNd

のCss（以下）を適用：::-ms-thumb appears behind track
：ここ

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

はインターネットエクスプローラと同様の質問です 提案された解決策は、 - ms-trackにマージンを追加することでしたが、成功はありませんでした。

私の:: edgeをMSエッジで見せる方法はありますか？chromeと全く同じですか？

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エッジブラウザの特異性を使用する必要があります：

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を使用して最初の入力をアンドロイドとイオスにのみ表示し、2番目をウィンドウに表示します。

と少ないファイルは次のとおりです。

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