改变input[type=range]的样式动态滑动

更新时间:2023-04-07 07:53:32 阅读：评论：0

<!doctypehtml> <htmllang=”en”>

<head> <metachart=”utf-8″> <metaname=”viewport”content=”width=device-width,initial-scale=1.0″> <metahttp-equiv=”x-ua-compatible”content=”ie=edge”> <title>修改range</title>
<style>
.slider-1{
width:600px;
margin:200pxauto;
}

.slider-1input[type=range]{
-webkit-appearance:none;
width:600px;
border-radius:5px;
background:-webkit-linear-gradient(#f5c057,#f5c057)no-repeat#e6e6e5;
background-size:50%100%;
}

.slider-1input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
}

.slider-1input[type=range]::-webkit-slider-runnable-track{
height:10px;
border-radius:5px;
}

.slider-1input[type=range]:focus{
outline:none;
}

.slider-1input[type=range]::-webkit-slider-thumb{
-webkit-appearance:none;
height:20px;
width:2px;
margin-top:0px;
background:#f7931e;
cursor:pointer;
}

.slider-1.s-mark{
margin-top:17px;
}

.slider-1.s-markspan{
font-size:12px;
color:#3e3a39;
display:bl人大代表履职情况ock;
text-align:center;
}

.slider-1.s-markspan:first-child{
float:left;
}

.slider-1.s-markspan:nth-child(2){
float:right;
}
&l守望先锋ht;/style> </head>

<body>
<divclass=”slider-1″>
<inputtype=”range”name=”rangemolecular”id=””max=&#小学一年级拼音试卷8221;2000″min=”0″step=”100%”value=””oninput=”mark(event)”>
<divclass=”s-mark”>
<span>0</span>
<span>200电气专业排名0</span>
<span>1000</span>
</div>
</div> <scriptsrc=”https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js”></script>
<script>
functionmark(){
event||(event=window.event);
$(‘.slider-1input[type=range]’).val(event.target.value);
varinfo=event.target.value/2000*100;
$(‘.slider-1input[type=range]̵检察院实习报告7;).css(‘background-size’,info+‘%100%’);
}
</script> </body>

</html>