填充范围控制跨浏览器的下半部分

Question

例如，请查看this fiddle（请不要在IE中）。

（你可以在this link看到控件的描述。）

她使用-ms-fill-lower和-ms-fill-upper来控制拇指两侧的颜色，如下所示：

input[type=range]::-ms-track {
  width: 300px;
  height: 5px;

  /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
background: transparent;

  /*leave room for the larger thumb to overflow with a transparent border */
  border-color: transparent;
  border-width: 6px 0;

  /*remove default tick marks*/
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #777;
  border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
  background: #ddd;
  border-radius: 10px;
}
input[type=range]::-ms-thumb {
  border: none;
  height: 16px;
  width: 16px;
  border-radius: 50%;
  background: goldenrod;
}
input[type=range]:focus::-ms-fill-lower {
  background: #888;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ccc;
}

The result (in IE) http://brennaobrien.com/assets/blog/custom-slider-ie-updated.png

但是，据我所知，... ::-ms- ...伪元素仅适用于IE。在Chrome中，上面的代码似乎没有任何效果。在Chrome中，我最终得到了这个：

The result (in Chrome) http://brennaobrien.com/assets/blog/custom-slider.png

我可以做些什么来实现跨浏览器的这种效果？

谢谢！

Answer 1

你可以使用渐变来实现这个效果，请看这里：http://codepen.io/ryanttb/pen/fHyEJ例如：

input::-moz-range-track{
    background: linear-gradient(90deg,black 50%,grey 50%);
}

当然，你也需要js来改变百分比值。

Answer 2

对于其他任何发现这一点的人 - 如果您不希望渐变的渐变外观，那么现在使用HTML5标准背景大小是一个很好的选择。我在https://www.w3schools.com/howto/howto_js_rangeslider.asp的教程周围建立了我的范围。

所以我的解决方案是在css中：

.slidecontainer {
    display:inline-block;
    vertical-align:middle;
    width: 60%;
    position:relative;
    margin:5px 0;
    background:url('/images/cyan_back.png') no-repeat left top;
    background-size:0 14px;
    border-radius:7px;
}

然后使用jquery：

$('.slidecontainer').css('background-size',$(this).val()+'% 14px');

我相信这也是一个跨浏览器友好。