如何解决输入范围滑块的跨浏览器兼容性问题？

Question

我使用带有 css 的自定义范围滑块，这里我遇到了滑块轨道的问题。在 mozilla 中，我使用选择器进行进度 (-moz-range-progress) 和 IE -ms-filler-lower 和 -ms-filler-upper。

所以，这两种浏览器都可以正常工作。但是我无法通过使用 webkit 找到 Chrome 的解决方案，所以我无法根据滑块拇指的位置更改轨道的颜色。

CSS：

body {

  color: red;
  font-family: "HelveticaNeue", "Helvetica Neue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  margin: 0;
}

header {

  background-color: white;  
  padding: 60px 40px;
}


h1 {
  font-size: 200%;
}

h3 {
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
}

p {
  font-size: 90%;
  font-weight: normal;
}

article {
  -webkit-column-count: 4;
  column-count: 4;
}

p {
  margin: 0px;
}

/**
 * Text Slider Directive - CSS  
 **/
.text-size-slider {
  line-height: 100%;
  font-size: 14px;
  position: relative;
}

.text-size-slider .small-letter,.text-size-slider .big-letter
{
  font-weight: bold;
}

.text-size-slider .slider {
  -webkit-appearance: none;
  margin: 0 8px;
}

.text-size-slider .slider:focus {
  outline: none;
}

.text-size-slider .slider::-webkit-slider-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}
.text-size-slider .slider::-moz-range-thumb {
  border: none;
  cursor: pointer;
  -webkit-appearance: none;
  background-color: rgba(192, 35, 74, 1);
  width: 15px;
  height: 15px;
  border-radius: 50%;
  margin-top: -6px;
}

.text-size-slider .slider::-webkit-slider-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}
.text-size-slider .slider::-moz-range-thumb::before {
 content:"YEAH";
 display:block;
 background:rgba(192, 35, 74, 1);
 height:20px;
 width:20px;
 position:absolute;
 top:-20px;
 left:-10px;
}

.pointer {
    vertical-align:top;
  height: 40px;
  width: 40px;
  border-radius:20px 20px  0 20px;
  background-color:rgba(192, 35, 74, 1);
  display:block;
  transform: rotate(45deg);
  position:absolute;
  top: -46px;
  margin-left:13px;

  color:black;

}

.pointer span {
  display: inline-block;
  transform: rotate(-45deg);
  margin-left:12px;
  margin-top: 14px;
  color:white;


}
.gray-line {

  position: absolute;
  height: 2px;
  background-color: grey;
  top: 17px;
  width: 20px;

}

.text-size-slider .slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  background: linear-gradient(90deg, red, brown) 0 100% no-repeat content-box;
  border: 0;
}

.text-size-slider .slider::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
   background-color: grey;
  border: 0;
}
.text-size-slider .slider::-moz-range-progress {
  background-color: rgba(192, 35, 74, 1); 
}
.text-size-slider .slider::--webkit-slider-runnable-progress {
  background-color: rgba(192, 35, 74, 1); 
}
.text-size-slider .slider:-webkit-fill-lower {  

  background-color: blue;

}

这里是 plunker：https://plnkr.co/edit/ecU8KvlO2jWGWy4jVAcS?p=preview

预期结果：

Answer 1

好的，我对此也很感兴趣，所以我做了一些研究，不幸的是没有等效的 css 属性来实现相同的行为。

我有在 ::-webkit-slider-thumb 上添加 ::after 元素的想法，但 Chrome 不会让你这样做，有一个 issue opened on Chronium 但他们已经用“won”关闭了它't fix" 状态，因为他们确实意味着删除曾经存在的功能（或错误？）。

现在你能做什么不涉及 JS？

按照this question 的建议，您可以：

纯 CSS 解决方案：

Chrome：隐藏输入[范围]的溢出，并填充所有空间 左手拇指阴影颜色。

IE：无需重新发明轮子： ::-ms-fill-lower

Firefox 无需重新发明轮子： ::-moz-range-progress

应用于您的代码的答案将添加如下内容：

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
      overflow: hidden;
      background-color: #9a905d;
    }
  .text-size-slider .slider::-webkit-slider-thumb {
    border: none;
    cursor: pointer;
    -webkit-appearance: none;
    background-color: blue;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    box-shadow: 80px 0 0 80px gray;
    margin-top: -6px;
  }

}

但是您会看到滑块 ::thumb 不再是圆形的，而是与滑块的高度一样高，这是因为此解决方案依赖于隐藏输入的溢出并在右侧添加一个框阴影，该阴影扩展到输入的宽度相同，这就是您如何在每侧实现两种不同的颜色，不幸的是，这也会在 Y 轴上隐藏您的 ::thumb。

这是你开始考虑添加一个::after 伪元素的时候，但正如我之前提到的，它不会起作用。

那么现在呢？好吧，使用 JS。在上面链接的同一个问题中，有一个 JS 解决方案，我有 updated 以使其更具响应性。