I need such a slider plug-in. It is very simple, but I have been searching for a long time on the Internet and cannot find a suitable one. Please recommend one. You can rely on jquery, but do not rely on jquery ui and other libraries
ringa_lee2017-05-19 10:37:24
I took some time and wrote one. I don’t know if it conforms to the rules. Portal: 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
Just input range.
If you want to consider compatibility, you can try nouislider (https://refreshless.com/nouis...
漂亮男人2017-05-19 10:37:24
Such a simple requirement, and I couldn’t find it after searching for a long time, so why not write one myself?
The reach-out party is really rampant and stepped on me directly.