Html 样式上下填充 HTML5 范围输入

Style lower and upper fill in HTML5 range input

提问by blcook223

As explained here, IE allows styling of the lower and upper fill or track regions in CSS as follows:

如所解释这里，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">

Does anyone know of a way to apply different stylesto the upper and lower tracks of a range input in Firefox, Chrome, etc. using CSS or any JS library?

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

UPDATE:

更新：

As pointed out by Wilson F, this is now supported in Firefox:

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

采纳答案by Alexander Dayan

First of all, read the article Styling Cross-Browser Compatible Range Inputs with CSSby Daniel Stern. His idea is to make the input invisible and then apply the custom styles.

首先，请阅读Daniel Stern撰写的使用 CSS 设计样式跨浏览器兼容范围输入的文章。他的想法是让输入不可见，然后应用自定义样式。

He also developed an excellent online tool named randge.cssin which you select the style preset and parameters and get auto generated CSS code like the following one:

他还开发了一个名为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">

Yes, with CSS only it's possible on IE only, but if you don't mind to add some scripting it can be simulated with linear gradient. See the following sample: codepen.io/ryanttb/pen/fHyEJ

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

回答by Wilson F

There's a (newish?) pseudo-element for Firefox that styles (what IE calls) the 'lower' part of the range input. According to the documentation:

Firefox 有一个（新的？）伪元素，用于设置（IE 所称的）范围输入的“较低”部分。根据文档：

The ::-moz-range-progressCSS pseudo-element represents the portion of the "track" (the groove in which the indicator aka thumb slides) of an <input>of type="range", which corresponds to values lower than the value currently selected by the thumb.

的:: - MOZ-范围正在进行CSS伪元素代表了“轨道”的部分（槽，其中又名拇指滑动的指示器）的<input>类型=“范围”，其对应于值低于该值的当前通过拇指选择。

For the upper track, you still use (per Alexander Dayan's answer) ::-moz-range-track.

对于上轨道，您仍然使用 (根据亚历山大·达扬( Alexander Dayan) 的回答) ::-moz-range-track。

I just discovered and tried it today; works pretty well.

我今天刚刚发现并尝试了它；效果很好。

回答by Duplich

At this stage there is still no option for native implementation of -ms-fill-loweror -moz-fill-lowerin Chrome. Manipulating the range input element with RangeSlider.jswas not an option so I used the tweaking technique with CSS linear Gradients and little bit of javascript to fire css changes on input range thumb movement Hope this helps someone check example on Codepen

在这个阶段，仍然是本地实现的任何选项 -ms-fill-lower或者-moz-fill-lower在Chrome中。使用RangeSlider.js操作范围输入元素不是一个选项，所以我使用了 CSS 线性渐变的调整技术和一点点 javascript 来触发输入范围拇指移动的 css 更改希望这有助于某人检查 Codepen 上的示例

回答by Eric D'Souza

I'm using this solution inspired by Noah Blon. It uses a box shadow based on view width (100vw is the max width of the slider), and constrains with overflow:hidden. I'm using a round thumb, so subtracted half the thumb width from the 100vw, otherwise the box shadow creeps over the other side of the thumb.

我正在使用受Noah Blon启发的这个解决方案。它使用基于视图宽度的框阴影（100vw 是滑块的最大宽度），并使用 overflow:hidden 进行约束。我使用的是圆形拇指，因此从 100vw 中减去拇指宽度的一半，否则框阴影会爬过拇指的另一侧。

css

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

html

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

(fyi bisque, sienna and peru are all named css colours)

（仅供参考 bisque、sienna 和 peru 都被命名为 css 颜色）

回答by mickeymicks

i'm using the following code which was based on the link provided by A. Dayan. Taking note of the min-max values and being specifically for webkit, also hiding that it is actually a gradient.

我正在使用以下代码，该代码基于 A. Dayan 提供的链接。注意最小值-最大值并专门用于 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>