Html
    Css
    Js

    
                        
* {
	touch-action:manipulation
}
#range {
	width:500px;
	height:80px;
	margin:100px auto;
	position:relative;
}
.bar {
	width:500px;
	height:12px;
	border-radius:10px;
	background:#e4e7ed;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	cursor:pointer;
}
.progress {
	width:0;
	height:12px;
	border-radius:10px;
	background:#409eff;
}
.dot {
	width:20px;
	height:20px;
	background:#fff;
	border:1px solid #409eff;
	position:absolute;
	bottom:0;
	top:0;
	margin:auto 0;
	border-radius:50%;
	cursor:pointer;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生js slider滑块

更新时间:2021-07-27 00:54:11

0