How to style an input type range sliders thumb and track

[djkato]

Same as in #6972, I don't know how I would go about styling the pseudo elements of a range type input slider, specifically it's thumb and track.
https://toughengineer.github.io/demo/slider-styler/slider-styler.html
http://danielstern.ca/range.css/#/
All slider customization requires access to these, but even putting it into the <style> element (Vue) ignores the regular css:

input[type=range]::-webkit-slider-runnable-track,
input[type=range]::-ms-track,
input[type=range]::-moz-range-track{
/*stuff here*/
}
input[type=range]::-moz-range-thumb,
input[type=range]::-ms-thumb,
input[type=range]::-webkit-slider-thumb{
/*stuff here*/
}

The tailwind doc doesn't mention anything about input elements in general from what I tried.

[rohmann]

Hi @djkato,

You can see all the pseudo classes included natively here: https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-class-reference. The range input pseudo classes aren't included. I think Tailwind likes to steer clear of non standard cases like this because it's a whole lot of nuance to support over time. For years the range input has been a strange hodge-podge of selectors across broweser. I'm sure it's something they would consider down the road if a specification emerged to make it consistent

I've not tried it in all browsers, but I've noticed that Chrome based browsers are finicky when it comes to multiple selectors. Breaking them out into their own rule sets (like the examples you've shared) seems to help.

Example: https://play.tailwindcss.com/yFQGknjCqn

[djkato]

Thanks! https://tailwindcss.com/docs/adding-custom-styles#using-css-and-layer
Got curious about that @layer and it lead me to that doc link^ Seems its exactly what I need

[rohmann]

Ok great! Good luck getting it all dialed in.

[aayush301]

According to recent versions of Tailwind CSS, If you want, you can add these styles right inside your HTML file:
class="[&::-webkit-slider-runnable-track]:rounded-full ..."

https://play.tailwindcss.com/9ayu07qkQh

[FredTreg]

@zhaodong-wang use class instead of className

[beyzanur-seyhan]

Thanks :)

[fuad-hasan-safat]

how can I change the color of blue part

[yongvuthivann]

Is there any suggestion the blue part?

[stanevidanza]

This is my solution, it's working for me: h-2 w-full cursor-pointer appearance-none rounded-md bg-gray-200 [&::-webkit-slider-thumb]:!bg-primary