Heim > Fragen und Antworten > Hauptteil
Ich brauche ein solches Slider-Plugin, aber ich habe lange im Internet gesucht und kein passendes gefunden. Sie können sich auf jquery verlassen, aber verlassen Sie sich nicht auf jquery ui und andere Bibliotheken 
ringa_lee2017-05-19 10:37:24
抽了点时间，写了一个，不知道符合规则不
传送门：https://jsfiddle.net/0u17c6r0/
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.ranger {
width: 200px;
height: 10px;
border-radius: 5px;
background: lightgrey;
position: relative;
margin: 100px auto;
}
.dot {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top:-5px;
background: #227dc5;
border-radius: 10px;
cursor: pointer;
}
.tip {
position: absolute;
width: 60px;
height: 25px;
text-align: center;
line-height: 25px;
left: -20px;
top: -30px;
background: #227dc5;
color: white;
}
.tip:before{
content: '';
position: absolute;
width: 0;
height: 0;
border: 5px transparent solid;
border-top-color: #227dc5;
left: 25px;
top: 25px;
}
</style>
</head>
<body>
<p class="ranger">
<p class="dot">
<p class="tip">0%</p>
</p>
</p>
<script type="text/javascript">
var dot = document.querySelector('.dot'),
tip = document.querySelector('.tip'),
startX = 0,
dotX = 0;
dot.addEventListener('mousedown', mouseDown);
document.addEventListener('mouseup', mouseUp);
function mouseDown(e) {
startX = e.clientX;
dotX = dot.offsetLeft;
document.addEventListener('mousemove', mouseMove);
}
function mouseUp() {
document.removeEventListener('mousemove', mouseMove);
}
function mouseMove(e) {
var left = Math.min(Math.max(dotX+(e.clientX - startX), 0), 180),
percentage = parseInt(left/1.8)+'%';
tip.innerText = percentage;
dot.style.left = Math.min(Math.max(dotX+(e.clientX - startX), 0), 180)+'px';
}
</script>
</body>
</html>
天蓬老师2017-05-19 10:37:24
input range就可以呀.
如果要考虑兼容性可以试试 nouislider (https://refreshless.com/nouis...