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但是他们关闭了它通过＆＃34;赢得修复＆＃34;状态，因为他们确实意味着删除曾经存在的那个功能（或错误？）。

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

根据this question的建议，您可以：

纯CSS解决方案：

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

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

Firefox无需重新发明轮子：   :: - MOZ-范围正在进行

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

@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不再是圆形，而是与滑块的高度一样高，这是因为此解决方案依赖于隐藏输入的溢出并添加右侧的box-shadow扩展到输入的相同宽度，这就是你在每一侧实现两种不同颜色的方式，不幸的是，这也隐藏了Y轴上的::thumb。

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

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

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

1 个答案: