需要这样一个滑块插件，很简单，但是从网上找了好久找不到合适的，求大神推荐一个，可以依赖jquery，但不要依赖jquery ui和其他库
抽了点时间，写了一个，不知道符合规则不传送门：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>
bootstrap-slider
可以用一下这个，我用过还可以。
input range就可以呀.如果要考虑兼容性可以试试 nouislider (https://refreshless.com/nouis...
这么简单的需求, 又找了许久找不到, 那为什么不自己写一个呢?
伸手党真是猖狂，直接就踩我了。
抽了点时间，写了一个，不知道符合规则不
传送门：https://jsfiddle.net/0u17c6r0/
bootstrap-slider
可以用一下这个，我用过还可以。
input range就可以呀.
如果要考虑兼容性可以试试 nouislider (https://refreshless.com/nouis...
这么简单的需求, 又找了许久找不到, 那为什么不自己写一个呢?
伸手党真是猖狂，直接就踩我了。