*{

            margin:;

            padding:;

            box-sizing: border-box;

            -webkit-touch-callout: none;

            -webkit-user-select: none;

            -khtml-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;

        }

        .outer{

            position: relative;

            margin:20px auto;

            width: 200px;

            height: 30px;

            line-height: 28px;

            border:1px solid #ccc;

            background: #ccc9c9;

        }

        .outer span,.filter-box,.inner{

            position: absolute;

            top:;

            left:;

        }

        .outer span{

            display: block;

            padding:0  0 0 36px;

            width: 100%;

            height: 100%;

            color: #fff;

            text-align: center;

        }

        .filter-box{

            width:;

            height: 100%;

            background: green;

            z-index:;

        }

        .outer.act span{

            padding:0 36px 0 0;

        }

        .inner{

            width: 36px;

            height: 28px;

            text-align: center;

            background: #fff;

            cursor: pointer;

            font-family: "宋体";

            z-index:;

            font-weight: bold;

            color: #929292;

            cursor: move;

        }

        .outer.act .inner{

            color: green;

        }

        .outer.act span{

            z-index:;

        }

<div class="outer" id="outer">

        <div class="filter-box"></div>

        <span id="span">

            滑动解锁

        </span>

        <div class="inner" id="inner">>></div>

    </div>

var inner=document.getElementById('inner');

        var outer=document.getElementById('outer');

        var span=document.getElementById('span');

        var left;

        var dx=outer.offsetWidth-inner.offsetWidth;//能移动的最大距离

        inner.onmousedown=function(event){//鼠标按下

            var event=window.event||ev;

            left=event.clientX-inner.offsetLeft;//鼠标按下时的位置

            document.onmousemove=function(event){//鼠标移动

                var event = window.event||ev;

                lefta=event.clientX-left;//鼠标移动的距离

                console.log(dx,lefta);

                if(lefta<0){

                    lefta=0;

                }else if(dx<lefta){

                    lefta=dx;

                }

                inner.style.left=lefta+'px';

            }

        document.onmouseup = function(event){//鼠标抬起

            var event = window.event||ev;

　　　　　　document.onmousemove = null;

　　　　　　document.onmouseup = null;

                lefta=event.clientX-left;

                if(lefta<0){

                    lefta=0;

                    span.innerHTML='滑动解锁';

                }else if(dx<lefta){

                    lefta=dx;

                    span.innerHTML='解锁成功';

                    inner.innerHTML='√';

                    inner.onmousedown=null;

                }else{

                    lefta=0;

                }

                inner.style.left=lefta+'px';

　　　　};

}