Javascript 输入类型范围中的进度条

是否可以从输入范围中实际生成进度条？有人正在键入一个数字，而该条向右移动，拇指左侧的背景颜色发生了变化，这取决于数字的大小。这里是现场演示`

` Aight为我的问题找到了完美的解决方案：

---

目前，没有纯CSS和input[type=“range”]跨浏览器解决方案。如果您正在寻找像IE的

：：-ms-fill-lower

和

：-ms-fill-upper

的实现，目前还没有其他浏览器实现

---

你可以用一些javascript和其他元素来伪装它。

那么你期待什么呢？应该改变颜色还是什么？是的，“输入类型范围”中该拇指左侧的颜色/进度条应该将其宽度从0更改为拇指的当前位置。不知道如何将这个想法实现到代码中。类似这样的东西，但只使用CSS

    input[type=number]{
    font-size: 20px;
    padding: 5px;
    }

input[type=range]{
margin-left: -200px;
    position: absolute;
    top:7px;

}
input[type=range]{
    -webkit-appearance: none;
    width: 170px;
}

input[type=range]::-webkit-slider-runnable-track {

    height: 35px;
    background: #ddd;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 35px;
    border: 0;
    width: 16px;
    background: goldenrod;
}

input[type=range]:focus 
{
    outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
}