如何解決輸入範圍滑塊的跨瀏覽器兼容性問題？

Question

我用CSS自定義範圍滑塊，在這裏我面臨與滑塊軌道問題。在Mozilla中，我使用了選擇器來獲取進度（-moz-range-progress）和IE -ms-filler-lower和-ms-filler-upper。

因此，它對兩個瀏覽器都正常工作。但我無法使用webkit找到Chrome的解決方案，因此我無法根據滑塊的位置更改曲目的顏色。

CSS：

body { 

    color: red; 
    font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: normal; 
    margin: 0; 
} 

header { 

    background-color: white; 
    padding: 60px 40px; 
} 


h1 { 
    font-size: 200%; 
} 

h3 { 
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-weight: normal; 
} 

p { 
    font-size: 90%; 
    font-weight: normal; 
} 

article { 
    -webkit-column-count: 4; 
    column-count: 4; 
} 

p { 
    margin: 0px; 
} 

/** 
* Text Slider Directive - CSS 
**/ 
.text-size-slider { 
    line-height: 100%; 
    font-size: 14px; 
    position: relative; 
} 

.text-size-slider .small-letter,.text-size-slider .big-letter 
{ 
    font-weight: bold; 
} 

.text-size-slider .slider { 
    -webkit-appearance: none; 
    margin: 0 8px; 
} 

.text-size-slider .slider:focus { 
    outline: none; 
} 

.text-size-slider .slider::-webkit-slider-thumb { 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    background-color: rgba(192, 35, 74, 1); 
    width: 15px; 
    height: 15px; 
    border-radius: 50%; 
    margin-top: -6px; 
} 
.text-size-slider .slider::-moz-range-thumb { 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    background-color: rgba(192, 35, 74, 1); 
    width: 15px; 
    height: 15px; 
    border-radius: 50%; 
    margin-top: -6px; 
} 

.text-size-slider .slider::-webkit-slider-thumb::before { 
content:"YEAH"; 
display:block; 
background:rgba(192, 35, 74, 1); 
height:20px; 
width:20px; 
position:absolute; 
top:-20px; 
left:-10px; 
} 
.text-size-slider .slider::-moz-range-thumb::before { 
content:"YEAH"; 
display:block; 
background:rgba(192, 35, 74, 1); 
height:20px; 
width:20px; 
position:absolute; 
top:-20px; 
left:-10px; 
} 

.pointer { 
    vertical-align:top; 
    height: 40px; 
    width: 40px; 
    border-radius:20px 20px 0 20px; 
    background-color:rgba(192, 35, 74, 1); 
    display:block; 
    transform: rotate(45deg); 
    position:absolute; 
    top: -46px; 
    margin-left:13px; 

    color:black; 

} 

.pointer span { 
    display: inline-block; 
    transform: rotate(-45deg); 
    margin-left:12px; 
    margin-top: 14px; 
    color:white; 


} 
.gray-line { 

    position: absolute; 
    height: 2px; 
    background-color: grey; 
    top: 17px; 
    width: 20px; 

} 

.text-size-slider .slider::-webkit-slider-runnable-track { 
    width: 100%; 
    height: 2px; 
    cursor: pointer; 
    background: linear-gradient(90deg, red, brown) 0 100% no-repeat content-box; 
    border: 0; 
} 

.text-size-slider .slider::-moz-range-track { 
    width: 100%; 
    height: 2px; 
    cursor: pointer; 
    background-color: grey; 
    border: 0; 
} 
.text-size-slider .slider::-moz-range-progress { 
    background-color: rgba(192, 35, 74, 1); 
} 
.text-size-slider .slider::--webkit-slider-runnable-progress { 
    background-color: rgba(192, 35, 74, 1); 
} 
.text-size-slider .slider:-webkit-fill-lower { 

    background-color: blue; 

} 

這裏是plunker：https://plnkr.co/edit/ecU8KvlO2jWGWy4jVAcS?p=preview

預期結果：

Answer 1

好吧，我是在這個漂亮的興趣，以及，所以我做了一些研究，不幸的是沒有等價的CSS屬性來實現相同的行爲。

我有想在:: - webkit-slider-thumb上添加:: after元素的想法，但Chrome不會讓你這樣做，有一個issue opened on Chronium但他們已經用「won」 t修正「狀態，因爲他們的確意味着去除曾經存在的功能（或bug？）。

現在你可以做什麼，不涉及JS？

至於建議就this question你可以：

純CSS解決方案：

鉻：隱藏輸入[範圍]溢出，並填寫所有 左拇指與陰影顏色的空間。

IE：沒有必要重新發明輪子： :: - MS-填充下

火狐沒有必要重新發明輪子： :: - MOZ範圍，進度

的適用於你的代碼的答案將增加像這樣：

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    input[type='range'] { 
     overflow: hidden; 
     background-color: #9a905d; 
    } 
    .text-size-slider .slider::-webkit-slider-thumb { 
    border: none; 
    cursor: pointer; 
    -webkit-appearance: none; 
    background-color: blue; 
    width: 15px; 
    height: 15px; 
    border-radius: 50%; 
    box-shadow: 80px 0 0 80px gray; 
    margin-top: -6px; 
    } 

} 

但是你會看到，滑塊::thumb不再是圓的，但就像滑塊一樣高這是因爲這個解決方案依賴於隱藏輸入的溢出並在右側添加一個箱形陰影，該陰影擴展到輸入的相同寬度，這就是如何在每一側實現兩種不同的顏色，不幸的是這也隱藏了您的Y軸上的::thumb。

這是當你開始考慮添加一個::after僞元素，但正如我前面提到的，它不會工作。

那麼現在呢？好吧，使用JS。在上面鏈接的同一個問題中，有一個JS解決方案，我使用updated來提高響應速度。