<!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 {
width: 600px;
margin: 200px auto;
}
.slider-1 input[type=range] {
-webkit-appearance: none;
width: 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;
width: 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>
黄山市民网：https://www.huangshanshimin.com/
