Javascript 自定义范围输入以指示进度

我有一个

范围输入

：

<input id="progress" type="range" min="0" max="100" value="0" title="">

现在我想在图标的左侧添加一个

颜色

有点像
Chrome
中的
音频标签的外观：


但我绝对不知道怎么做

或者，如果可以使用
css
或
javascript
执行此操作，则可以使用Jquery执行以下操作：


$（'input[type=“range”]”）。更改（函数（）{
var val=（$（this.val（）-$（this.attr（'min'））/（$（this.attr（'max'）-$（this.attr（'min'）））；
$（this.css（'background-image'），
'-webkit渐变（线性，左上，右上，'
+“颜色停止（“+val+”，#000080），”
+'颜色停止（'+val+'，#c5c5）'
+ ')'
);
});
input[type=“range”]{
-webkit外观：无；
-moz外观：无；
边界半径：6px；
高度：6px；
背景图像：-webkit渐变(
线性的
左上角，
右上角，
彩色光圈（0.15，#000080），
颜色停止（0.15，#C5）
);
}
输入[type='range']：：-webkit滑块拇指{
-webkit外观：无！重要；
背景色：#E9E9E9；
边框：1px实心#CECECE；
高度：15px；
宽度：15px；
}
工作起来很有魅力。伟大的