1、先将代码给大家：首先CSS：修改input range的样式问题：代码如下（建议直接ctrl+V）：.progress{ 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！！！）<div id="app"><input id="processRange" 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代码：var app = new Vue({ el: '#app', data: { processPoint:0, duration:'300' //input range总分段 }, methods: { changeProcess: function() { var range = document.getElementById('processRange'); this.processPoint = range.value; console.log(range.value); }, } });最终的效果如下：
4、用到的知识：1：html的<input type="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 即 拖拽时获取 input value 的值。var range = document.getElementById('processRange');this.processPoint = range.value;计算百分长度processPoint*100/durationprocessPoint为拖拽过得长度，duration 为总长度最后鲜果如图。
