需要這樣一個滑桿插件，很簡單，但是從網路上找了好久找不到合適的，求大神推薦一個，可以依賴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...
這麼簡單的需求, 又找了許久找不到, 那為什麼不自己寫一個呢?
伸手黨真是猖狂，直接就踩我了。