如何将 HTML5 范围输入设置为在 slider 之前和之后具有不同的颜色？

Question

我希望左侧为绿色，右侧为灰色。 如上图所示将是完美的。 最好是纯 CSS 解决方案（只需要担心 WebKit）。

这样的事情可能吗？

Answer 1

纯 CSS解决方案：

• Chrome：隐藏input[range]的溢出，并用阴影颜色填充拇指剩下的所有空间。
• IE：无需重新发明轮子::-ms-fill-lower
• Firefox无需重新发明轮子::-moz-range-progress

 /*Chrome*/ @media screen and (-webkit-min-device-pixel-ratio:0) { input[type='range'] { overflow: hidden; width: 80px; -webkit-appearance: none; background-color: #9a905d; } input[type='range']::-webkit-slider-runnable-track { height: 10px; -webkit-appearance: none; color: #13bba4; margin-top: -1px; } input[type='range']::-webkit-slider-thumb { width: 10px; -webkit-appearance: none; height: 10px; cursor: ew-resize; background: #434343; box-shadow: -80px 0 0 80px #43e5f7; } } /** FF*/ input[type="range"]::-moz-range-progress { background-color: #43e5f7; } input[type="range"]::-moz-range-track { background-color: #9a905d; } /* IE*/ input[type="range"]::-ms-fill-lower { background-color: #43e5f7; } input[type="range"]::-ms-fill-upper { background-color: #9a905d; }

 <input type="range"/>

Answer 2

虽然理论上接受的答案是好的，但它忽略了这样一个事实，即拇指不能大于轨道的大小而不会被overflow: hidden切断。 请参阅此示例，了解如何仅使用一点点 JS 来处理此问题。

 // .chrome styling Vanilla JS document.getElementById("myinput").oninput = function() { var value = (this.value-this.min)/(this.max-this.min)*100 this.style.background = 'linear-gradient(to right, #82CFD0 0%, #82CFD0 ' + value + '%, #fff ' + value + '%, white 100%)' };

 #myinput { background: linear-gradient(to right, #82CFD0 0%, #82CFD0 50%, #fff 50%, #fff 100%); border: solid 1px #82CFD0; border-radius: 8px; height: 7px; width: 356px; outline: none; transition: background 450ms ease-in; -webkit-appearance: none; }

 <div class="chrome"> <input id="myinput" min="0" max="60" type="range" value="30" /> </div>

Answer 3

对的，这是可能的。 虽然我不推荐它，因为所有浏览器都没有真正正确支持input range ，因为在 HTML5 中添加了一个新元素，而 HTML5 只是一个草稿（并且会持续很长时间）所以就样式而言可能不是最佳选择。

此外，您还需要一些 JavaScript。 为了简单起见，我冒昧地使用jQuery库。

给你： http : //jsfiddle.net/JnrvG/1/ 。

Answer 4

对此的一个小更新：

如果您使用以下内容，它将即时更新，而不是在鼠标释放时更新。

“更改鼠标移动”，功能”

<script>
$('input[type="range"]').on("change mousemove", function () {
    var val = ($(this).val() - $(this).attr('min')) / ($(this).attr('max') - $(this).attr('min'));

    $(this).css('background-image',
                '-webkit-gradient(linear, left top, right top, '
                + 'color-stop(' + val + ', #2f466b), '
                + 'color-stop(' + val + ', #d3d3db)'
                + ')'
                );
});</script>

Answer 5

建立在@dargue3 的回答之上，如果你想让拇指比轨道大，你想充分利用<input type="range" />元素并跨浏览器，你需要一些额外的行JS 和 CSS。

在 Chrome/Mozilla 上，您可以使用linear-gradient技术，但您需要根据@Attila O.此处提到的min 、 max 、 value属性调整比率。 你需要确保你没有在 Edge 上应用它，否则不会显示拇指。 @Geoffrey Lalloué在这里更详细地解释了这一点。

另外值得一提的是，你需要调整rangeEl.style.height = "20px"; 在 IE/旧版上。 简单地说，这是因为在这种情况下“高度不应用于轨道，而是应用于包括拇指在内的整个输入”。 小提琴

 /** * Sniffs for Older Edge or IE, * more info here: * https://stackoverflow.com/q/31721250/3528132 */ function isOlderEdgeOrIE() { return ( window.navigator.userAgent.indexOf("MSIE ") > -1 || !!navigator.userAgent.match(/Trident.*rv\\:11\\./) || window.navigator.userAgent.indexOf("Edge") > -1 ); } function valueTotalRatio(value, min, max) { return ((value - min) / (max - min)).toFixed(2); } function getLinearGradientCSS(ratio, leftColor, rightColor) { return [ '-webkit-gradient(', 'linear, ', 'left top, ', 'right top, ', 'color-stop(' + ratio + ', ' + leftColor + '), ', 'color-stop(' + ratio + ', ' + rightColor + ')', ')' ].join(''); } function updateRangeEl(rangeEl) { var ratio = valueTotalRatio(rangeEl.value, rangeEl.min, rangeEl.max); rangeEl.style.backgroundImage = getLinearGradientCSS(ratio, '#919e4b', '#c5c5c5'); } function initRangeEl() { var rangeEl = document.querySelector('input[type=range]'); var textEl = document.querySelector('input[type=text]'); /** * IE/Older Edge FIX * On IE/Older Edge the height of the <input type="range" /> * is the whole element as oposed to Chrome/Moz * where the height is applied to the track. * */ if (isOlderEdgeOrIE()) { rangeEl.style.height = "20px"; // IE 11/10 fires change instead of input // https://stackoverflow.com/a/50887531/3528132 rangeEl.addEventListener("change", function(e) { textEl.value = e.target.value; }); rangeEl.addEventListener("input", function(e) { textEl.value = e.target.value; }); } else { updateRangeEl(rangeEl); rangeEl.addEventListener("input", function(e) { updateRangeEl(e.target); textEl.value = e.target.value; }); } } initRangeEl();

 input[type="range"] { -webkit-appearance: none; -moz-appearance: none; width: 300px; height: 5px; padding: 0; border-radius: 2px; outline: none; cursor: pointer; } /*Chrome thumb*/ input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; -moz-appearance: none; -webkit-border-radius: 5px; /*16x16px adjusted to be same as 14x14px on moz*/ height: 16px; width: 16px; border-radius: 5px; background: #e7e7e7; border: 1px solid #c5c5c5; } /*Mozilla thumb*/ input[type="range"]::-moz-range-thumb { -webkit-appearance: none; -moz-appearance: none; -moz-border-radius: 5px; height: 14px; width: 14px; border-radius: 5px; background: #e7e7e7; border: 1px solid #c5c5c5; } /*IE & Edge input*/ input[type=range]::-ms-track { width: 300px; height: 6px; /*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: 2px 0; /*remove default tick marks*/ color: transparent; } /*IE & Edge thumb*/ input[type=range]::-ms-thumb { height: 14px; width: 14px; border-radius: 5px; background: #e7e7e7; border: 1px solid #c5c5c5; } /*IE & Edge left side*/ input[type=range]::-ms-fill-lower { background: #919e4b; border-radius: 2px; } /*IE & Edge right side*/ input[type=range]::-ms-fill-upper { background: #c5c5c5; border-radius: 2px; } /*IE disable tooltip*/ input[type=range]::-ms-tooltip { display: none; } input[type="text"] { border: none; }

 <input type="range" value="80" min="10" max="100" step="1" /> <input type="text" value="80" size="3" />

Answer 6

如果您使用 first answer ，则拇指有问题。 在 chrome 中，如果您希望拇指大于轨道，则框阴影会与轨道与拇指的高度重叠。

只需总结所有这些答案，并用较大的滑块拇指编写正常工作的滑块： jsfiddle

 const slider = document.getElementById("myinput") const min = slider.min const max = slider.max const value = slider.value slider.style.background = `linear-gradient(to right, red 0%, red ${(value-min)/(max-min)*100}%, #DEE2E6 ${(value-min)/(max-min)*100}%, #DEE2E6 100%)` slider.oninput = function() { this.style.background = `linear-gradient(to right, red 0%, red ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 ${(this.value-this.min)/(this.max-this.min)*100}%, #DEE2E6 100%)` };

 #myinput { border-radius: 8px; height: 4px; width: 150px; outline: none; -webkit-appearance: none; } input[type='range']::-webkit-slider-thumb { width: 6px; -webkit-appearance: none; height: 12px; background: black; border-radius: 2px; }

 <div class="chrome"> <input id="myinput" type="range" min="0" value="25" max="200" /> </div>

Answer 7

您可以简单地使用强调色（在 Chrome 99 中）

 <input style="accent-color: #2ecc71" type="range"/>

Answer 8

以前接受的解决方案不再有效。

我最终编写了一个简单的函数，它将range包装到一个样式容器中，在光标之前添加所需的栏。 我写了这个例子，其中很容易看到css中设置的两种颜色“蓝色”和“橙色”，因此可以快速修改它们。

Answer 9

-webkit-appearance: none; 使用datalist时删除刻度线。 如果 slider 的整体外观很好，但默认的蓝色（在 Chrome 中）需要适合主题颜色，应用filter: hue-rotate(); 到input[type="range"]元素。 可以使用其他过滤器。 有些甚至更改 slider 的背景颜色。

 input[type="range"] { filter: hue-rotate(180deg); //rotate degrees to get desired color }

 <input type="range" min="0" max="5" step="1" list="data" value="1" /> <datalist id="data"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </datalist>

Answer 10

现在，WebKit、Firefox 和 IE 中的每个伪元素都支持它。 但是，当然，每个人的情况都不一样。 :(

有关某些解决方案，请参阅此问题的答案和/或搜索标题为prettify <input type=range> #101的 CodePen。

Answer 11

如果您不介意使用 JS，这是另一种方法。 这个@steveholgado Codepen 在input[type=range]的顶部覆盖了轨道、进度和拇指的 3 个 div，不透明度为零（透明）。 oninput 侦听器会为 div 更新 styles 以创建几乎任何您想要的外观。

好处是它与浏览器完全无关，并且处理 Chrome 上样式滑块的不灵活性。 一般来说，它提供了更多的样式灵活性。

如果您想对 slider 范围使用 0 到 100 以外的值，则必须在侦听器中适当缩放。 例如， value = value * 100 / parseInt(range.getAttribute("max")); （假设最小值=0）

https://codepen.io/steveholgado/pen/OEpGXq

HTML：

<div class="wrap">
  <input type="range" class="range" min="0" max="100" step="0.1" value="0">
  <div class="track">
    <div class="track-inner"></div>
  </div>
  <div class="thumb"></div>
</div>

CSS：

.wrap {
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.range {
  width: 100%;
  cursor: pointer;
  opacity: 0;
}
.range::-ms-tooltip {
  display: none;
}

.track {
  width: 100%;
  height: 4px;
  background: #DDDDDD;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.track-inner {
  width: 0;
  height: 100%;
  background: #E24F4F;
}

.thumb {
  width: 16px;
  height: 16px;
  background: #AAAAAA;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0%, -50%);
  pointer-events: none;
}

记者：

const range = document.querySelector('.range')
const thumb = document.querySelector('.thumb')
const track = document.querySelector('.track-inner')

const updateSlider = (value) => {
  thumb.style.left = `${value}%`
  thumb.style.transform = `translate(-${value}%, -50%)`
  track.style.width = `${value}%`
}

range.oninput = (e) =>
  updateSlider(e.target.value)

updateSlider(50) // Init value

Answer 12

使用这个简单的 css 属性来改变复选框、单选按钮和范围的颜色

accent-color: #F55050;

Answer 13

input type="range" min="0" max="50" value="0"  style="margin-left: 6%;width: 88%;background-color: whitesmoke;"

以上代码更改范围输入样式.....