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

Question

I'm 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.

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