Html
    Css
    Js

    
                        
   * {
	padding:0;
	margin:0;
}
.d_box {
	position:relative;
	box-sizing:border-box;
	height:3px;
	width:220px;
	background:#ccc;
	top:50%;
	margin-top:-1.5px;
	cursor:pointer;
}
.d_box.box3 {
	width:120px;
}
.d_bg {
	background:red;
	width:0;
	height:100%;
}
.d_cir {
	width:18px;
	height:18px;
	border:1px solid #ddd;
	background:#eee;
	cursor:pointer;
	position:absolute;
	border-radius:50%;
	top:-10px;
	left:0;
}
.d_cont {
	height:40px;
}
.wid-200 {
	/* width:200px;
	*/
      margin:0 auto;
}
.wid-250 {
	/* width:250px;
	*/
      margin:0 auto;
}
.wid-300 {
	/* width:300px;
	*/
      margin:0 auto;
}
.wid-400 {
	width:400px;
	margin:0 auto;
}
.d_cont>div {
	float:left;
}
.d_txt {
	height:40px;
	line-height:40px;
	margin:0 10px;
	min-width:40px;
	text-align:center;
	user-select:none;
	user-select:none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	user-select:none;
}
.toast {
	width:auto;
	height:auto;
	position:absolute;
	background:#373c42;
	color:#fff;
	font-size:13px;
	border-radius:5px;
	padding:3px 6px;
	z-index:100;
	font-family:'microsoft yahei','Arial Narrow',Arial,sans-serif;
}
.triangle {
	position:absolute;
	left:50%;
	border:4px solid transparent;
	border-top-color:#373c42;
	bottom:-8px;
	margin-left:-4px;
}
.d_range {
	height:40px;
	line-height:40px;
}
.hide {
	display:none;
}

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

拖拽进度条兼容移动(原创)

①修复了初始toast显示为 undefined 和另外一些小bug
②调用参数增加了type:static 在页面显示的功能
③优化了一些代码
④增加了点击指定位置滑动的功能
⑤下回代码会继续优化和改进

0