我希望左侧为绿色，右侧为灰色。如上图所示将是完美的。最好是纯 CSS 解决方案（只需要担心 WebKit）。
这样的事情可能吗？
问问题
205817 次
11 回答
177
纯 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"/>于 2016-07-02T19:46:27.030 回答
121
虽然理论上公认的答案是好的，但它忽略了这样一个事实，即拇指在不被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>于 2019-07-22T20:32:51.753 回答
25
对的，这是可能的。虽然我不推荐它，因为input range并非所有浏览器都真正支持它，因为它是 HTML5 中添加的一个新元素，而 HTML5 只是一个草稿（并且会很长时间）所以就样式而言它可能不是最好的选择。
此外，您还需要一些 JavaScript。为了简单起见，我冒昧地使用了jQuery库。
给你：http: //jsfiddle.net/JnrvG/1/。
于 2013-08-22T20:01:41.207 回答
14
如果您使用第一个答案，则拇指有问题。在 chrome 中，如果您希望 thumb大于 track，则框阴影与 thumb 的高度重叠轨道。
只需总结所有这些答案并使用更大的滑块拇指编写正常工作的滑块：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>于 2020-09-17T15:36:03.687 回答
13
在@dargue3 的回答之上，如果您希望拇指大于轨道，您想充分利用该<input type="range" />元素并跨浏览器，您需要一些额外的 JS 和 CSS 行。
在 Chrome/Mozilla 上，您可以使用该linear-gradient技术，但您需要根据@Attila O.此处提到的min, max,属性调整比率。您需要确保没有在 Edge 上应用此功能，否则不会显示拇指。@Geoffrey Lalloué在这里更详细地解释了这一点。value
另一件值得一提的是，您需要调整rangeEl.style.height = "20px";IE/Older。简单地说，这是因为在这种情况下“高度不应用于轨道，而是应用于包括拇指在内的整个输入”。小提琴
/**
* 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" />于 2020-03-06T09:11:46.760 回答
11
对此的一个小更新：
如果您使用以下内容，它将即时更新而不是鼠标释放。
“更改鼠标移动”，功能“
<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>
于 2016-02-28T21:22:46.150 回答
6
以前接受的解决方案不再起作用。
我最终编写了一个简单的函数，它将 包装range到一个样式化的容器中，在光标之前添加了所需的栏。我写了这个例子，很容易看到css中设置的“蓝色”和“橙色”两种颜色，因此可以快速修改它们。
于 2016-07-05T08:17:19.090 回答
5
使用这个简单的 css 属性来更改复选框、单选按钮和范围的颜色
accent-color: #F55050;
于 2021-11-20T10:39:20.110 回答
0
-webkit-appearance: none;使用时删除刻度线datalist。如果滑块的总体外观很好，但默认的蓝色（在 Chrome 中）需要适合主题颜色，则将 afilter: hue-rotate();应用于input[type="range"]元素。可以使用其他过滤器。有些甚至更改滑块的背景颜色。
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>于 2022-03-05T06:41:37.997 回答
0
现在 WebKit、Firefox 和 IE 中的每个伪元素都支持它。但是，当然，每个人的情况都不同。: (
请参阅此问题的答案和/或搜索标题prettify <input type=range> #101为某些解决方案的 CodePen。
于 2016-02-10T01:09:03.557 回答
-5
input type="range" min="0" max="50" value="0" style="margin-left: 6%;width: 88%;background-color: whitesmoke;"
上面的代码更改范围输入样式.....
于 2017-05-05T10:13:23.830 回答