input range 拖拽过后颜色用法

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%;}改完之后如下图所示：

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); }, } });最终的效果如下：

5、3：js代码：每次 oninput 即 拖拽时获取 input value 的值。var range = document.getElementById('processRange');this.processPoint = range.value;计算百分长度processPoint*100/durationprocessPoint为拖拽过得长度，duration 为总长度最后鲜果如图。