修改默认样式
input[type="range"] {
-webkit-appearance: none; /*去除默认样式*/
background: #999;
border-radius:.3rem;
width: 14rem;
-webkit-appearance: none;
height:.5rem;
padding: 0;
border: none;
position: relative;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;/*去除默认样式*/
cursor: default;
top: 0;
height: 20px;
width: 20px;
transform: translateY(0px);
background: #E7303E;
border-radius:.6rem;
border: 5px solid #EB8F96;
position: relative;
z-index: 200;
}
.box{
width: 14rem;
position: relative;
}
#bg{
position: absolute;
left: 0;
top: .15rem;
background: red;
height: .5rem;
z-index: 100;
border-radius: .3rem;
}
页面布局
<div class="box">
<div id="bg" style=""></div>
<input type="range" id="money" name="money" min="0" max="" value="0" onchange="setMoney()" />
</div>
js
function setMoney() {
//let val = 100/(总价/单价);//得到百分比
document.getElementById('bg').style.width = val+'%';
}