How to change color of input range slider with tailwind css?

Question

Wish you are having a wonderful day,

I'm currently trying to apply some color to a simple slider range.

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

It doesn't work at all to change the color like this, I also tried with text and border class.

I made some research and assume I should use this to change the slider bar : -webkit-slider-thumb

Like this :

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

However I wish to only use tailwind and dont apply style with pure css. if anyone have any insight to give me I would really appreciate it.

Keary

Not for sure but does this answer your question? Check the docs here: tailwindcss.com/docs/browser-support#vendor-prefixes – Darg

Thanks for your help ! I didn't knew this, + the can i use it seems super helpful to track brower compatibility. I finally got the answer I wanted by search more inside the doc – Keary

Answer 1

Here is what works for me, using 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>

Also, link to the documentation if someone pass by and need more info : https://tailwindcss.com/docs/accent-color

Keary

"oninput" event – Hegemony

Answer 2

Also found this approach:

 <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" 
 />

Countless

How's the browser support for this? – Wistrup

excellent styling – Rampage

Answer 3

Similar to Nathan Gilson's approach, you can make use of the @apply directive in CSS to achieve a clean and concise looking HTML element. Using the .slider selector in the CSS follows the DRY principle (Don't Repeat Yourself), which makes it easy to apply the same style to multiple sliders.

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

the code above creates a slider that looks like this

Freighter