拇指前的样式输入范围背景

我想在范围输入上使用不同颜色的拇指样式。我尝试过寻找解决方案，但我还没有找到合适的解决方案。这是我需要它的样子：拇指前的样式输入范围背景

铬似乎不再支持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

拇指前的样式输入范围背景

回答

相关问题