inputrange拖拽过后颜色用法此文档为VUE篇，但是思路是一样的
方法/步骤
1、先将代码给大家：首先CSS：修改inputran壹执慵驾ge的样式问题：代码如下（建议直接ctrl+V）：.progr髫潋啜缅ess{width:100%;height:40px;}input[type=range]{/*input外壳样式*/-webkit-appearance:none;border-radius:10px;height:5px;z-index:10;}input[type=range]::-webkit-slider-runnable-track{/*轨道*/height:5px;background:rgba(0,0,0,0.2);border-radius:10px;}input[type=range]::-webkit-slider-thumb{/*滑块*/-webkit-appearance:none;height:8px;width:8px;margin-top:-1px;background:#ffffff!important;border-radius:50%;}改完之后如下图所示：
2、其次HTML（用到了vue！！！）<di箪滹埘麽vid="app"><inputid="proce霜杼厮贿ssRange"class="progress"type="range":value="processPoint":max="duration"min="0"step="1"@input="changeProcess();"style="width:100%;margin-bottom:3px;":style="{background:'-webkit-linear-gradient(top,#059CFA,#059CFA)0%0%/'+processPoint*100/duration+'%100%no-repeat'}"></div>
3、其次JS代码：varapp=newVue({el:'#app',data:{processPoint:0,duration:'300'//inputrange总分段},methods:{changeProcess:function(){varrange=document.getElementById('processRange');this.processPoint=range.value;console.log(range.value);},}});最终的效果如下：
4、用到的知识：1：html的<inputtype="range">拖拽时会触发oninput事件2：css3的background的渐变与backgroud-size；最后渲染为：background:-webkit-linear-gradient(top,rgb(5,156,250),rgb(5,156,250))0%0%/27%100%no-repeat；解释一下各个参数如下图：部分1：-webkit-linear-gradient(top,rgb(5,156,250),rgb(5,156,250))表示：渐变参数，从上到下开始渐变，从rgb(5,156,250)到rgb(5,156,250)变颜色，部分2：0%0%从左上角的(0%,0%)开始填充颜色部分3：27%100%到整个而input的（27%，100%）填充颜色结束。然后通过计算修改部分3中27%的值来改变填充长度。
5、3：js代码：每次oninput即拖拽时获取inputvalue的值。varrange=document.getElementById('processRange');this.processPoint=range.value;计算百分长度processPoint*100/durationprocessPoint为拖拽过得长度，duration为总长度最后鲜果如图。
