拇指前的樣式輸入範圍背景

我想在範圍輸入上使用不同顏色的拇指樣式。我嘗試過尋找解決方案，但我還沒有找到合適的解決方案。這是我需要它的樣子：拇指前的樣式輸入範圍背景

鉻似乎不再支持input[type='range']::-webkit-slider-thumb:before了，我不知道如何設計它。這是我到目前爲止有：

input[type='range'] { 
    min-width: 100px; 
    max-width: 200px; 
    &::-webkit-slider-thumb { 
     -webkit-appearance: none !important; 
     background-color: @white; 
     border: 1px solid @gray-4; 
     height: 14px; 
     width: 14px; 
     &:hover, 
     &:focus, 
     &:active { 
      border-color: @blue; 
      background-color: @gray-2; 
     } 
    } 
    &::-webkit-slider-runnable-track { 
     background-color: @gray-2; 
     border: 1px solid @gray-4; 
    } 
}

來源

2017-05-03 user3312508

[這個其他堆棧溢出問題（http://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-different-color-before-and-after-slider）有一個很好的答案。 –

[如何設置HTML5範圍輸入以在滑塊之前和之後具有不同的顏色？]（http://stackoverflow.com/questions/18389224/how-to-style-html5-range-input-to-have-不同顏色-之前和之後的滑動件） – shaochuancs

通過shambalambala引用在後的訣竅是聰明，但我不認爲它會在這種情況下工作，如果你想要得到的東西看起來完全一樣的圖像，你顯示。方法是在拇指上放一個陰影，以在拇指左側創建不同的顏色。由於陰影沿垂直方向和水平方向延伸，因此還必須將overflow:hidden添加到範圍或軌道以剪切陰影。不幸的是，這也夾住了大拇指。因此，如果您想在垂直方向上延伸超出軌道的拇指，例如在圖像中顯示拇指是直徑大於軌道寬度的圓的位置，則這不起作用。

我不確定這個問題有一個純粹的CSS解決方案。使用JavaScript，解決這個問題的一個方法是使兩個範圍元素完全重疊。對於一個範圍元素，您只會看到拇指，而您只能看到該軌道。您可以使用軌道元素上的陰影方法在拇指之前獲取不同的顏色。您可以根據需要在拇指範圍內設置拇指的風格，並且由於此範圍元素的overflow未設置爲hidden，所以它可以延伸超出軌道的寬度。然後，您可以使用JavaScript將兩個範圍元素連接在一起，以便當您將拇指移動到thumb-visible元素上時，track-visible元素的值也會發生變化。

例如（在WebKit瀏覽器工程 - 將需要爲其他瀏覽器一些額外的造型）：

<html> 
 
    <head> 
 
    
 
    <style> 
 

 
    .styled_range { 
 
    position: relative; 
 
    padding: 10px; 
 
    } 
 

 
    input[type=range] { 
 
    -webkit-appearance: none; 
 
    width: 600px; 
 
    background: transparent; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    } 
 

 
    input[type=range]::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    } 
 

 
    input[type=range]:focus { 
 
    outline: none; 
 
    } 
 

 
    input[type=range]::-webkit-slider-runnable-track { 
 
    width: 100%; 
 
    height: 12px; 
 
    } 
 

 
    .track_range { 
 
    pointer-events: none; 
 
    } 
 

 
    .track_range::-webkit-slider-runnable-track { 
 
    background: #D0D0D0; 
 
    border-radius: 6px; 
 
    overflow: hidden; 
 
    } 
 

 
    .track_range::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    background: transparent; 
 
    height: 1px; 
 
    width: 1px; 
 
    box-shadow: -600px 0 0 600px #666666; 
 
    } 
 

 
    .thumb_range::-webkit-slider-runnable-track { 
 
    background: transparent; 
 
    cursor: pointer; 
 
    } 
 

 
    .thumb_range::-webkit-slider-thumb { 
 
    -webkit-appearance: none; 
 
    border: 3px solid #ffffff; 
 
    border-radius: 20px; 
 
    height: 40px; 
 
    width: 40px; 
 
    background: #1180AD; 
 
    cursor: pointer; 
 
    margin: -12px 0px 0px 0px; 
 
    } 
 

 

 
    </style> 
 
    </head> 
 
    <body> 
 
    <form> 
 
    <div class="styled_range"> 
 
     <input type="range" class="track_range"/> 
 
     <input type="range" class="thumb_range"/> 
 
    </div> 
 
    <br/> 
 
    <div class="styled_range"> 
 
     <input type="range" class="track_range"/> 
 
     <input type="range" class="thumb_range"/> 
 
    </div> 
 
    </form> 
 
    </body> 
 

 
    <script> 
 

 
    window.onload = function() { 
 
    var styledRanges = document.getElementsByClassName('styled_range'); 
 
    for (var i=0; i<styledRanges.length; i++) { 
 
     var thumbRange = null, trackRange = null; 
 
     for (var j=0; j<styledRanges[i].children.length; j++) { 
 
     var child = styledRanges[i].children[j]; 
 
     if (child.className === 'thumb_range') 
 
      var thumbRange = child; 
 
     else if (child.className === 'track_range') 
 
      var trackRange = child; 
 
     } 
 
     thumbRange.oninput = function(thumbRange, trackRange) { 
 
     return function(e) { 
 
      trackRange.value = thumbRange.value; 
 
     }; 
 
     }(thumbRange, trackRange); 
 
    } 
 
    } 
 

 

 
    </script> 
 
</html>

來源

2017-05-04 18:12:13 cjg

拇指前的樣式輸入範圍背景

回答

相關問題