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为总长度最后鲜果如图。