Phone side effect (a) the effect of the slider

Now write front-end code has a variety of frameworks and libraries, easy to implement features we want to write for a long time, native js may be blurred, in order to consolidate, we will continue to write native code from the beginning today .

First on the effect of:

Slider effect end of the phone, do webapp may encounter before, once to achieve the following.

html structure

 <div class="range">
        <div class="range-progress"></div>
        <span class="range-bar"></span>
        <span class="range-text"></span>
 </div>

css code:

  *{
            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 logic

/*阻止页面的默认滑动*/
        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)
        }