如何将 HTML5 范围输入设置为在滑块前后具有不同的颜色？

Question

我希望左侧为绿色，右侧为灰色。如上图所示将是完美的。最好是纯 CSS 解决方案（只需要担心 WebKit）。

这样的事情可能吗？

原文由 Shamoon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

纯 CSS 解决方案：

• Chrome： 隐藏来自 input[range] 的溢出，并用阴影颜色填充拇指留下的所有空间。
• IE： 无需重新发明轮子： ::-ms-fill-lower
• Firefox 无需重新发明轮子： ::-moz-range-progress

 /*Chrome*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type='range'] {
      overflow: hidden;
      width: 80px;
      -webkit-appearance: none;
      background-color: #9a905d;
    }

    input[type='range']::-webkit-slider-runnable-track {
      height: 10px;
      -webkit-appearance: none;
      color: #13bba4;
      margin-top: -1px;
    }

    input[type='range']::-webkit-slider-thumb {
      width: 10px;
      -webkit-appearance: none;
      height: 10px;
      cursor: ew-resize;
      background: #434343;
      box-shadow: -80px 0 0 80px #43e5f7;
    }

}
/** FF*/
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}
input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}
/* IE*/
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}
input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}

 <input type="range"/>

原文由 deathangel908 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

虽然接受的答案在理论上是好的，但它忽略了这样一个事实，即拇指不能大于轨道的大小而不被 overflow: hidden 。请参阅此示例，了解如何仅使用少量 JS 来处理此问题。

 // .chrome styling Vanilla JS

document.getElementById("myinput").oninput = function() {
  var value = (this.value-this.min)/(this.max-this.min)*100
  this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)'
};

 #myinput {
  background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%);
  border: solid 1px #82CFD0;
  border-radius: 8px;
  height: 7px;
  width: 356px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

 <div class="chrome">
  <input id="myinput" min="0" max="60" type="range" value="30" />
</div>

原文由 dargue3 发布，翻译遵循 CC BY-SA 4.0 许可协议