样式上下填充HTML5范围输入

Question

正如here 所解释的，IE 允许在 CSS 中设置上下填充或跟踪区域的样式，如下所示：

/* The following only affects the range input in IE */

input[type="range"]::-ms-fill-lower {
  background-color: red; 
}

input[type="range"]::-ms-fill-upper {  
  background-color: blue;
}

<input type="range">

有谁知道在 Firefox、Chrome 等中使用 CSS 或任何 JS 库将不同样式应用于范围输入的上下轨道的方法？

更新：

正如Wilson F 所指出的，Firefox 现在支持此功能：

/* The following only affects the range input in FF */

input[type="range"]::-moz-range-progress {
  background-color: red; 
}

input[type="range"]::-moz-range-track {  
  background-color: blue;
}

<input type="range">  

Answer 1

首先，阅读 Daniel Stern 的文章Styling Cross-Browser Compatible Range Inputs with CSS。他的想法是让输入不可见，然后应用自定义样式。

他还开发了一个名为randge.css 的优秀在线工具，您可以在其中选择样式预设和参数并获取自动生成的 CSS 代码，如下所示：

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -3.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ac51b5;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ac51b5;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 12.8px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ac51b5;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 39px;
  border-radius: 7px;
  background: #65001c;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ac51b5;
}
input[type=range]:focus::-ms-fill-upper {
  background: #ac51b5;
}

body {
  padding: 30px;
}

<input type="range">

是的，只有 CSS 可以在 IE 上使用，但如果您不介意添加一些脚本，可以使用线性渐变来模拟。请参阅以下示例：codepen.io/ryanttb/pen/fHyEJ

Answer 2

Firefox 有一个（新的？）伪元素，它可以设置（IE 称之为）范围输入的“较低”部分的样式。根据the documentation：

::-moz-range-progress CSS 伪元素表示部分 “轨道”（指示器又名拇指滑动的凹槽）的 type="range" 的 <input>，对应的值低于 拇指当前选择的值。

对于上面的轨道，你仍然使用（每个Alexander Dayan's answer）::-moz-range-track。

我今天才发现并尝试过；效果很好。

Answer 3

在这个阶段，仍然没有原生实现的选项 -ms-fill-lower 或 -moz-fill-lower 在 Chrome 中。使用RangeSlider.js 操作范围输入元素不是一个选项，因此我使用了 CSS 线性渐变和一点点 javascript 的调整技术来触发输入范围拇指移动的 css 更改 希望这可以帮助某人check example on Codepen

Answer 4

我正在使用这个受Noah Blon 启发的解决方案。它使用基于视图宽度的盒子阴影（100vw 是滑块的最大宽度），并使用溢出：隐藏进行约束。我使用的是圆形拇指，所以从 100vw 中减去拇指宽度的一半，否则盒子阴影会蔓延到拇指的另一侧。

css

.wb-PKR-slider {
    -webkit-appearance:none;
    appearance:none;
    margin:5px;
    width:calc(100% - 10px);
    width:-webkit-calc(100% - 10px);
    height:25px;
    outline:none;
    background:bisque;
    border-radius:12px;   
    overflow: hidden;
}
.wb-PKR-slider::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:25px;
    height:25px;
    background:sienna;
    box-shadow: -100vw 0 0 calc(100vw - 12px) peru;
    cursor:pointer;
    border-radius: 50%; 
}

html

<input type="range" min="0" max="150" value="25" class="wb-PKR-slider" id="wb-PKR-chip-count">

（仅供参考 bisque、sienna 和 peru 都是 named css colours）

Answer 5

我正在使用以下代码，该代码基于 A. Dayan 提供的链接。记下 min-max 值并专门针对 webkit，同时隐藏它实际上是一个渐变。

<html>
<head>
    <title>A styled slider</title>
    <script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>

    <style type="text/css">
        input[type='range'] {
            -webkit-appearance: none;
            width: 100%;
            border-radius: 4px;
            height: 5px;
            border-color: #1f1f1f; 
            border-style: solid; 
            border-width: 1px;
            background: -webkit-linear-gradient(left, green 0%, green 50%, black 50%);
        }

        input[type='range']::-webkit-slider-thumb {
            -webkit-appearance: none !important;
            -webkit-border-radius: 2px;
            background-color: blue;
            height: 21px;
            width: 9px;
        }

        input[type=range]:focus {
            outline: none; 
        }
    </style>


</head>
<body>
    <div>
      <input type="range" value="75" min="100" max="300" />
    </div>
    <script type="text/javascript" >
        $('input[type="range"]').on('input', function () {
            var percent = Math.ceil(((this.value - this.min) / (this.max - this.min)) * 100);
            console.log(this.min);
            $(this).css('background', '-webkit-linear-gradient(left, green 0%, green ' + percent + '%, black ' + percent + '%)');
        });
    </script>
</body>
</html>