拇指之前的样式输入范围背景 [英] Style input range background before thumb
本文介绍了拇指之前的样式输入范围背景的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我要在范围输入上用其他颜色为拇指之前的条设置样式.我尝试寻找解决方案,但还没有找到合适的解决方案.这就是我需要的样子:
I want to style the bar before the thumb with a different color on a range input. I'v tried looking for a solution but I havent found a proper solution. This is what I need it to look like:
Chrome似乎不再支持 input [type ='range'] ::-webkit-slider-thumb:before
,我不知该如何设置样式.这是我到目前为止的内容:
Chrome doesnt seem to support input[type='range']::-webkit-slider-thumb:before
anymore and I am at a loss how to style it. Here's what I have so far:
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">
这篇关于拇指之前的样式输入范围背景的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文