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

Question

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

Chrome似乎不再支持qazxsw poi而且我不知道如何设计它。这是我到目前为止所拥有的：

input[type='range']::-webkit-slider-thumb:before

Answer 1

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

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

例如（在webkit浏览器中工作 - 需要为其他浏览器添加一些额外的样式）：

hidden

Answer 2

<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>

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

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

问题描述投票：2回答：2

2个回答

最新问题

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

问题描述 投票：2回答：2

2个回答

最新问题

问题描述投票：2回答：2