input[type=range]填充进度条问题

 input[type=range] {
            -webkit-appearance: none; /*清除系统默认样式*/
            width: 100%;
            background: -webkit-linear-gradient(left,red, yellow) no-repeat, #ddd;
            height: 8px;
            border-radius: 4px ;
            outline: none;
            cursor: pointer;
   background-size: 0% 100%;
        }


      


        /*拖动块的样式   这是一个伪类的样式*/
        input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none; /*清除系统默认样式*/
            height: 16px; /*拖动块高度*/
            width: 16px; /*拖动块宽度*/
            background: #fff; /*拖动块背景*/
            border-radius: 50%;
            /* border: solid 1px #ddd; !*设置边框*!*/
        }


背景渐变 
以上方法就是 background-image背景和background-color的互相覆盖 
使用background-size:来实现比例控制


就是一个background-image:  的属性,自己找背景渐变属性去
一个background-image: -webkit-linear-gradient(left,red, yellow) 






----------------------------------------------------------------
老师使用的方法,感觉比较叼(最终解决方案)
它使用
background-image: -webkit-linear-gradient(left,red, yellow)   //我咋记得是 to left
background: linear-gradient(to right,red 20%, blue 1%,blue)


据说这种语法比较厉害
向右渐变,红色占20%  蓝色 1%  基本没改变(就不会显示渐变过程),由此填充进度条




进度条拖动的时候
使用 mousemove 事件
确实比change好用,流畅许多
但是可能效率比较低