携帯端末効果(一)スライダ効果

今、フロントエンドのコードを書くにはいろいろなフレームワークとライブラリがあります.軽くて簡単に私たちの機能を実現します.長く書くと、オリジナルjsがぼやけるかもしれません.強固にするために、オリジナルのコードを書き続けます.今日はこれからです.
先行効果:
携帯端末のスライダ効果は、webappをする可能性がありますが、次は実現します.
html構造

css代码：

  *{
            box-sizing: border-box;
        }
        .range{
            width: 90%;
            height: 40px;
            position: relative;
            margin: auto;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
        }
        .range:before,.range-bar,.range-text,.range-progress{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }
        .range:before{
            content: '';
            display: block;
            background-color: #ccc;
            width: 100%;
        }
        .range:before,.range-progress{
            height: 2px;
            left:0;
        }
        .range-bar{
            position: absolute;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color:#ccc ;
        }
        .range-progress{
            background-color:#00b3ee;
        }
        .range-text{
            top:100%;
            left:90%;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            color:#999;
        }

jsロジック

/*         */
        window.addEventListener('touchmove',function (e) {
            e.preventDefault();
        })
        var range=$('.range');
        var bar=$('.range-bar');
        var progress=$('.range-progress');
        var text=$('.range-text');
        var maxw=range.offsetWidth-bar.offsetWidth;//          
        var rangex=range.offsetLeft;
        var half=bar.offsetWidth/2;

        bar.addEventListener('touchstart',function (event) {
            var left=event.touches[0].pageX-rangex-half;
            render(left);
            event.preventDefault();
        })
        range.addEventListener('touchmove',function (event) {
            /*     left  */
            var left=event.touches[0].pageX-rangex-half;
            render(left);
        });
        range.addEventListener('touchstart',function (event) {
            var left=event.touches[0].pageX-rangex-half;
            render(left);
        })

        //    
        function render(value) {
            var left=value;
            /*  left      0          */
            if(left<=0){
                left=0;
            }
            if(left>=maxw){
                left=maxw;
            }
            /*       、      、   */
            bar.style.left=left+'px';
            progress.style.width=left+'px';
            text.innerText=Math.ceil(left/maxw*100)+'%';
        }
        function $(s) {
            return document.querySelector(s)
        }