<! DOCTYPE html>ul.lanren{margin:40px Auto; }. scale_panel{color:#999; Position:absolute; Line-height:18px; Left:60px;top:-0px; }. Scale_panel>span:first-child{Position:absolute; Left:-50px; Font-size:20px; }. Scale_panel>span:nth-child (2) {position:absolute; Right:-50px; Font-size:20px; }. Scale>span{Background-color:red; width:30px; height:30px; Position:absolute; Left:-2px;top:-15px; Cursor:pointer; Border-radius:50%; Font-size:20px; }. scale{Background-color: #eee; Border-left:1px #83BBD9 Solid; width:430px; height:10px; position:relative; Border-radius:20px; }. Scale>div{Background-repeat:repeat-x; Background-color:red;/*progress bar Color*/width:0px; Position:absolute; height:10px; Width:0; left:0; bottom:0; Border-radius:20px; }. Lanren>li{margin-left:3. 50px; position:relative; List-Style:none; Font-size:30px; } #title {Position:absolute; top:20px; left:30px; }</style>//progress bar codevarScale =function(btn,bar,title) { This. btn=document.getElementById (BTN); This. bar=document.getElementById (bar); This. title=document.getElementById (title); This. step= This. Bar.getelementsbytagname ("div") [0]; This. Init ();}; Scale.prototype={init:function (){ varf= This, g=document,b=window,m=Math; F.btn.ontouchstart=function(e) {varx= (e| | b.event). touches[0].clientx; varL= This. offsetleft; varmax=f.bar.offsetwidth- This. offsetwidth; G.ontouchmove=function(e) {varthisx= (e| | b.event). touches[0].clientx; varTo=m.min (Max,m.max ( -2,l+ (thisx-x)); F.btn.style.left=to+ ' px '; F.ondrag (M.round (M.max (0,to/max) (*100), to); B.getselection?b.getselection (). Removeallranges (): G.selection.empty (); }; G.ontouchend=NewFunction (' This.onmousemove=null '); }; }, Ondrag:function(pos,x) { This. Step.style.width=math.max (0,x) + ' px '; This. title.innerhtml=pos+ '% '; }}NewScale (' btn ', ' Bar ', ' title ');// });</script></body>Mobile End slider (native JS)