Html
    Css
    Js

    
                        
.box {
	width:300px;
	height:50px;
	position:relative;
}
.wire {
	width:300px;
	height:6px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-150px;
	margin-top:-3px;
	background-color:gray;
}
.piece {
	width:20px;
	height:30px;
	position:absolute;
	left:100%;
	top:50%;
	margin-top:-15px;
	background-color:black;
	z-index:1;
	border-radius:50%;
}
.color {
	width:100%;
	height:6px;
	background-color:red;
	position:absolute;
	left:0;
	top:0;
}
.value {
	color:blue;
	font-weight:600;
}

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

原生JS滑块

更新时间:2019-09-27 11:06:25

css样式可以自己调试,html结构最好别变。

0