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

【问题标题】：Style input range background before thumb拇指前的样式输入范围背景
【发布时间】：2017-05-03 23:46:47
【问题描述】：

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

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

【问题讨论】：

This other Stack Overflow question 有一个很好的答案。
How to style HTML5 range input to have different color before and after slider?的可能重复

标签： javascript jquery html css less

【解决方案1】：

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

&lt;input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1"&gt;

【讨论】：

【解决方案2】：

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

我不确定是否有针对此问题的纯 CSS 解决方案。使用 JavaScript，解决此问题的一种方法是制作两个完全重叠的范围元素。对于一个范围元素，您只会看到拇指，而对于一个范围元素，您只会看到轨道。您可以在轨道元素上使用阴影方法来获得拇指之前的不同颜色。您可以根据需要在拇指范围上设置拇指的样式，并且由于此范围元素的overflow 未设置为hidden，因此它可以超出轨道的宽度。然后，您可以使用 JavaScript 将两个范围元素 yoke 在一起，这样当您在 thumb-visible 元素上移动 thumb 时，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>

【讨论】：