我目前正在使用以下代码设置 HTML5 输入类型范围的样式:
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
width: 100%;
height: 8px;
padding: 0 20px;
background: #024069;
border-radius: 2px;
margin-top: 25px;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:25px;
height:25px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
border: 1px solid #787878;
}
这一切都很好。但现在我想在实际 slider 上使用两种不同的颜色，因此拇指左侧是蓝色，拇指右侧是黑色。
我试过 :before 但没用。我们怎样才能做到这一点？
最佳答案
下面是一些 JavaScript，它会在您更改值时更新栏的颜色。
input.oninput = function () {
var value = (input.value - input.min)/(input.max - input.min);
input.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', blue), ',
'color-stop(' + value + ', red)',
')'
].join('');
};
onload = function() {
var inputs = document.querySelectorAll('input[type=range]');
for (var i = 0; i < inputs.length; i++) {
input = inputs[i]
input.oninput = function () {
var value = (input.value - input.min)/(input.max - input.min);
input.style.backgroundImage = [
'-webkit-gradient(',
'linear, ',
'left top, ',
'right top, ',
'color-stop(' + value + ', blue), ',
'color-stop(' + value + ', red)',
')'
].join('');
};
}
};body {
margin: 20px;
}
input[type="range"]{
-webkit-appearance: none;
-moz-apperance: none;
width: 200px;
height: 8px;
padding: 0;
border-left: 20px solid blue;
border-right: 20px solid red;
background: #024069;
border-radius: 2px;
margin-top: 25px;
background-image: -webkit-gradient(
linear,
left top,
right top,
color-stop(0.2, blue),
color-stop(0.2, red)
);
outline: none;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:25px;
height:25px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
-ms-border-radius:20px;
-o-border-radius:20px;
border-radius:20px;
background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, #fefefe), color-stop(0.49, #d7d7d7), color-stop(0.51, #d1d1d1), color-stop(1, #c8c8c8) );
border: 1px solid #787878;
}<!doctype html>
<html>
<body>
<input type="range" min="1" max="100" step="1" value="20">
</body>
</html>感谢@adamvert 建议使用 oninput 而不是 onchange。
关于javascript - 之前的 HTML5 输入范围样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13913637/