Range滑块自定义颜色异常：颜色铺满轨道而非仅至当前值

问题本质 #

你通过::-webkit-slider-runnable-track设置的是整个滑块轨道的背景样式，这个伪元素对应的是滑块的完整轨道区域，并非仅当前值左侧的已选中部分。

具体原因 #

在WebKit内核浏览器（如Chrome、Safari）中，原生的<input type="range">并没有将轨道拆分为“已填充（当前值左侧）”和“未填充（当前值右侧）”两个独立的可直接样式化的伪元素。当你直接给::-webkit-slider-runnable-track设置background属性时，样式会作用于整个轨道，自然会出现颜色铺满全部的情况。

你的代码示例 #

HTML代码

<input
        class="w-full h-1 rounded-lg appearance-none outline-none cursor-pointer"
        type="range"
        value="60"
        min="0"
        max="100" />

CSS代码

input[type="range"]::-webkit-slider-runnable-track {
  height: 0.25rem;
  background: #c93b76;
}

效果说明 #

滑块轨道整体呈现#c93b76的粉红色，未根据当前值60区分出左侧已选中的填充区域与右侧未选中区域，颜色铺满了整个轨道。

内容的提问来源于stack exchange，提问作者Sakshi