如何用顺风css改变输入量程滑块的颜色？

Question

祝你今天过得愉快，

我目前正在尝试将一些颜色应用到一个简单的滑块范围。

<Input class="range pr-6 bg-red-500" 
                    type="range" 
                    value="0" min="0" 
                    max="1000" 
                    onChange="rangeSlide(this.value)" 
                    onmousemove="rangeSlide(this.value)"></Input>

它根本不工作，改变颜色这样，我也尝试了文本和边框类。

我做了一些研究，并假设我应该用它来改变滑块条：-webkit-滑块-拇指。

就像这样：

.range::-webkit-slider-thumb {
  background: #00fd0a;
}

然而，我希望只使用顺风，而不应用纯css风格。如果有人有洞察力给我，我会非常感激的。

Answer 1

我终于找到了怎么做。在问之前不多查文件是我的错。

下面是我使用accent-<color>-<number>所做的工作：

<Input class="range pr-6 accent-red-500" 
                    type="range" 
                    value="0" min="0" 
                    max="1000" 
                    onChange="rangeSlide(this.value)" 
                    onmousemove="rangeSlide(this.value)"></Input>

此外，如果有人路过并需要更多信息：https://tailwindcss.com/docs/accent-color，请链接到文档