如何使用 Tailwind 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-slider-thumb

像这样：

.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

Answer 2

还发现了这个方法：

 <input type="range" 
        class="appearance-none bg-transparent [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-black/25 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-[50px] [&::-webkit-slider-thumb]:w-[50px] [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-500" 
 />

Answer 3

与 Nathan Gilson 的方法类似，您可以利用 CSS 中的 @apply 指令来实现外观简洁的 HTML 元素。这也将使编辑具有相同类的任何其他元素变得容易。

HTML：

<input type="range" 
    class="appearance-none bg-transparent slider">

CSS：

.slider {
  @apply
  [&::-webkit-slider-runnable-track]:rounded-full 
  [&::-webkit-slider-runnable-track]:bg-black/25 
  [&::-webkit-slider-thumb]:appearance-none 
  [&::-webkit-slider-thumb]:h-5 
  [&::-webkit-slider-thumb]:w-5 
  [&::-webkit-slider-thumb]:rounded-full 
  [&::-webkit-slider-thumb]:bg-slate-50;
}

上面的代码创建了一个看起来像

的滑块