输入类型范围内的进度条答案

【问题标题】：Progress bar in input type range输入类型范围内的进度条
【发布时间】：2025-11-21 20:45:02
【问题描述】：

是否可以从输入范围实际制作进度条？有人正在输入一个数字，并且条形图向右移动，拇指左侧的背景颜色发生了变化，这取决于数字有多大。这里是现场演示http://jsfiddle.net/xnehel/ur26k9cx/2/`

    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;
}

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

【问题讨论】：

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

标签： javascript css angularjs html

【解决方案1】：

目前还没有纯 CSS 和 input[type="range"] 跨浏览器的解决方案。如果您正在寻找类似 IE 的 ::-ms-fill-lower 和 ::-ms-fill-upper 的实现，目前其他浏览器还没有实现。

您也许可以使用一些 javascript 和其他元素来伪造它。

【讨论】：