<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>修改range</title>
<style>
.slider-1 {
600px;
margin: 200px auto;
}
.slider-1 input[type=range] {
-webkit-appearance: none;
600px;
border-radius: 5px;
background: -webkit-linear-gradient(#F5C057, #F5C057) no-repeat #E6E6E5;
background-size: 50% 100%;
}
.slider-1 input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
.slider-1 input[type=range]::-webkit-slider-runnable-track {
height: 10px;
border-radius: 5px;
}
.slider-1 input[type=range]:focus {
outline: none;
}
.slider-1 input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 20px;
2px;
margin-top: 0px;
background: #F7931E;
cursor: pointer;
}
.slider-1 .s-mark {
margin-top: 17px;
}
.slider-1 .s-mark span {
font-size: 12px;
color: #3E3A39;
display: block;
text-align: center;
}
.slider-1 .s-mark span:first-child {
float: left;
}
.slider-1 .s-mark span:nth-child(2) {
float: right;
}
</style>
</head>
<body>
<div class="slider-1">
<input type="range" name="rangeMolecular" id="" max="2000" min="0" step="100%" value="" oninput="mark(event)">
<div class="s-mark">
<span>0</span>
<span>2000</span>
<span>1000</span>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script>
function mark() {
event || (event = window.event);
$('.slider-1 input[type=range]').val(event.target.value);
var info = event.target.value / 2000 * 100;
$('.slider-1 input[type=range]').css('background-size', info + '% 100%');
}
</script>
</body>
</html>