现在写前端代码有各种各样的框架和库，轻轻松松就实现我们要的功能，写久了，原生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)        }