.ui-slider-wrap { background: #e8e8e8; position: relative; }

.ui-slider-wrap .ui-slider-bg { width: 0; }

.ui-slider-wrap .ui-slider-btn { position: absolute; top: 0; left: 0; cursor: move; text-align: center; border: 1px solid #ccc; background: #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

.ui-slider-wrap .ui-slider-btn { background: #fff url(../img/slider.png) no-repeat center; }

.ui-slider-wrap .ui-slider-btn.success { background-image: url(../img/success.png); }

.ui-slider-wrap .ui-slider-text { width: 100%; height: 100%; font-family: "΢���ź�"; text-align: center; position: absolute; top: 0; left: 0; color: #666; }

.ui-slider-wrap .ui-slider-no-select { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; }


.container { width: 1080px; height: 600px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

.demo1 { width: 48%; height: 100%; float: left; padding: 20px; border: 1px dashed #fff; border-radius: 4px; box-sizing: border-box; position: relative; }

.demo2 { width: 48%; height: 100%; float: right; padding: 20px; border: 1px dashed #fff; border-radius: 4px; box-sizing: border-box; position: relative; }

.btns,   .result {}
 .slider{
 	float:left;
 	width:240px;
 }

pre { font-size: 13px; }