效果
鼠标点击后拖动滑块移动,移动至滑动条末端,通过验证,中途松开鼠标,滑块回到默认位置。
待改善
鼠标移出滑块范围则滑块会停止移动,即使此时鼠标松开,滑块也不会回到默认位置,再将鼠标放回滑块,即使鼠标没有摁下,也可以拖动滑块。
代码
<!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>滑块验证</title>
</head>
<style>
.box{
width: 300px;
height: 35px;