css代码：*{box-sizing:border-box;}.range{宽度：90%；高度：40px；位置：相对；保证金：自动；-webkit-tap-highlight-color:rgba(0,0,0,0);}.range:before,.range-bar,.range-text,.range-progress{位置：绝对；顶部：50%；变换：翻译Y(-50%)；-webkit-transform:translateY(-50%);}.range:before{内容：'';显示：块；背景色：#ccc；宽度：100%；}.range:before,.range-progress{高度：2px；左：0；}.range-bar{位置：绝对；宽度：30px；高度：30px；边界半径：50%；背景颜色：#ccc;}.range-progress{背景色：#00b3ee；}.range-text{top:100%;左：90%；变换：翻译Y(-50%)；变换：翻译Y(-50%)；颜色：#999；}js逻辑/*防止页面默认滑动*/window.addEventListener('touchmove',function(e){e.preventDefault();})varrange=$('.range');varbar=$('.range-bar');varprogress=$('.range-progress');vartext=$('.range-text');varmaxw=range.offsetWidth-bar.offsetWidth;//计算最大滑动距离varrangex=range.offsetLeft;varhalf=bar.offsetWidth/2;bar.addEventListener('touchstart',function(event){varleft=event.touches[0].pageX-rangex-half;render(left);event.preventDefault();})range.addEventListener('touchmove',function(event){/*计算滑块的左边距离*/varleft=event.touches[0].pageX-rangex-half;渲染（左）；});range.addEventListener('touchstart',function(event){varleft=event.touches[0].pageX-rangex-half;render(left);})//显示位置functionrender(value){varleft=value;/*判断左边的距离不能小于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){返回文档.querySelector(s)}