input[type=“range“]实现手动滑动条效果

修改默认样式

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+'%';
}