拇指前的样式输入范围背景
use*_*508 7 html javascript css jquery less
我想在范围输入上使用不同颜色的拇指之前的栏设置样式。我试过寻找解决方案，但我还没有找到合适的解决方案。这就是我需要的样子：
Chrome 似乎input[type='range']::-webkit-slider-thumb:before不再支持，我不知道如何设计它。这是我到目前为止所拥有的：
input[type='range'] {
min-width: 100px;
max-width: 200px;
&::-webkit-slider-thumb {
-webkit-appearance: none !important;
background-color: @white;
border: 1px solid @gray-4;
height: 14px;
width: 14px;
&:hover,
&:focus,
&:active {
border-color: @blue;
background-color: @gray-2;
}
}
&::-webkit-slider-runnable-track {
background-color: @gray-2;
border: 1px solid @gray-4;
}
}
document.querySelectorAll(".__range").forEach(function(el) {
el.oninput =function(){
var valPercent = (el.valueAsNumber - parseInt(el.min)) /
(parseInt(el.max) - parseInt(el.min));
var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+ valPercent+', #29907f), color-stop('+ valPercent+', #f5f6f8));';
el.style = style;
};
el.oninput();
});.__range{
margin:30px 0 20px 0;
-webkit-appearance: none;
background-color: #f5f6f8;
height: 3px;
width: 100%;
margin: 10px auto;
}
.__range:focus{
outline:none;
}
.__range::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: #29907f;
border-radius: 50%;
cursor: -moz-grab;
cursor: -webkit-grab;
}<input class="__range" id="rng" name="rng" value="30" type="range" max="100" min="1" value="100" step="1"> shambalambala 引用的帖子中的技巧很聪明，但我认为如果您想获得与您显示的图像完全相同的东西，那么在这种情况下它不会起作用。方法是在拇指上放置阴影，以在拇指左侧创建不同的颜色。由于阴影在垂直和水平方向上延伸，因此您还必须添加overflow:hidden到范围或轨道才能剪辑阴影。不幸的是，这也会夹伤拇指。因此，如果您想要一个在垂直维度上延伸超出轨道的拇指，例如在您显示的图像中，拇指是一个直径大于轨道宽度的圆圈，那么这是行不通的。
我不确定是否有一个纯 CSS 解决方案来解决这个问题。对于 JavaScript，解决此问题的一种方法是使两个范围元素完全重叠。对于一个范围元素，您将仅看到拇指，而对于一个范围元素，您将仅看到轨道。您可以在轨道元素上使用阴影方法来获得拇指之前的不同颜色。您可以根据需要在拇指范围上设置拇指样式，并且由于此范围元素overflow未设置为hidden，因此它可以延伸到轨道的宽度之外。然后，您可以使用 JavaScript 将两个范围元素连接在一起，这样当您在拇指可见元素上移动拇指时，轨道可见元素的值也会发生变化。
例如（适用于 webkit 浏览器——其他浏览器需要一些额外的样式）：
<html>
<head>
<style>
.styled_range {
position: relative;
padding: 10px;
}
input[type=range] {
-webkit-appearance: none;
width: 600px;
background: transparent;
position: absolute;
top: 0;
left: 0;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 12px;
}
.track_range {
pointer-events: none;
}
.track_range::-webkit-slider-runnable-track {
background: #D0D0D0;
border-radius: 6px;
overflow: hidden;
}
.track_range::-webkit-slider-thumb {
-webkit-appearance: none;
background: transparent;
height: 1px;
width: 1px;
box-shadow: -600px 0 0 600px #666666;
}
.thumb_range::-webkit-slider-runnable-track {
background: transparent;
cursor: pointer;
}
.thumb_range::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid #ffffff;
border-radius: 20px;
height: 40px;
width: 40px;
background: #1180AD;
cursor: pointer;
margin: -12px 0px 0px 0px;
}
</style>
</head>
<body>
<form>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
<br/>
<div class="styled_range">
<input type="range" class="track_range"/>
<input type="range" class="thumb_range"/>
</div>
</form>
</body>
<script>
window.onload = function() {
var styledRanges = document.getElementsByClassName('styled_range');
for (var i=0; i<styledRanges.length; i++) {
var thumbRange = null, trackRange = null;
for (var j=0; j<styledRanges[i].children.length; j++) {
var child = styledRanges[i].children[j];
if (child.className === 'thumb_range')
var thumbRange = child;
else if (child.className === 'track_range')
var trackRange = child;
}
thumbRange.oninput = function(thumbRange, trackRange) {
return function(e) {
trackRange.value = thumbRange.value;
};
}(thumbRange, trackRange);
}
}
</script>
</html>| 归档时间： |
|
| 查看次数： |
5858 次 |
| 最近记录： |