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">

是否有人知道如何使用CSS或任何JS库将不同样式应用于Firefox，Chrome等范围输入的上下轨道？

更新

正如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有一个（newish？）伪元素，它的样式（IE调用）是范围输入的“低级”部分。根据{{3}}：

:: - moz-range-progress CSS伪元素代表该部分的“轨道”（指示器也是拇指滑动的凹槽）的类型=“范围”的<input>，对应于低于的值目前由拇指选择的值。

对于上方曲目，您仍然使用（the documentation）::-moz-range-track。

我今天刚刚发现并尝试过它;效果很好。

Answer 3

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

Answer 4

我使用的是受Noah Blon启发的解决方案。它使用基于视图宽度的框阴影（100vw是滑块的最大宽度），并使用overflow：hidden进行约束。我使用的是圆形拇指，因此请从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">

（菲斯克浓汤，西耶娜和秘鲁都是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>

样式下部和上部填充HTML5范围输入

5 个答案: