Question

我想在拇指前设置样式，并在范围输入上使用不同的颜色。我尝试寻找解决方案，但我找不到合适的解决方案。这就是我需要的样子：

Chrome似乎不再支持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;
    }
}

Answer 1

shambalambala引用的帖子中的技巧很聪明，但我不认为如果你想获得看起来与你所展示的图像完全一样的东西，它会在这种情况下起作用。接近的方法是在拇指上留下阴影，在拇指左侧创建不同的颜色。由于阴影在垂直方向以及水平方向上延伸，因此您还必须将overflow:hidden添加到范围或轨道以便剪切阴影。不幸的是，这也会影响拇指。因此，如果您想要一个拇指在垂直维度上延伸到轨道之外，例如在图像中显示拇指是直径大于轨道宽度的圆圈，则无法使用。

我不确定这个问题是否有纯CSS解决方案。使用JavaScript，一种方法是使两个范围元素完全重叠。对于一个范围元素，您将只看到拇指，而您只能看到该轨道。您可以在轨道元素上使用阴影方法在拇指之前获取不同的颜色。您可以根据需要在拇指范围上设置拇指样式，并且由于此范围元素的overflow未设置为hidden，因此它可以超出轨道的宽度。然后，您可以使用JavaScript将两个范围元素组合在一起，这样当您在拇指可见元素上移动拇指时，轨迹可见元素的值也会发生变化。

例如（适用于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>

Answer 2

document.querySelectorAll(".__range").forEach(function(el) {       
  el.oninput =function(){            
  var valPercent = (el.valueAsNumber  - parseInt(el.min)) / 
                      (parseInt(el.max) - parseInt(el.min));
    var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
    el.style = style;
  };
  el.oninput();
});

.__range{
  margin:30px 0 20px 0;
  -webkit-appearance: none;
  background-color: #f5f6f8;
  height: 3px;
  width: 100%;
  margin: 10px auto;
}
.__range:focus{
  outline:none;
}
.__range::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #29907f;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab; 
}

<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1">

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

2 个答案: