How to Change Input Range Slider Color with TailwindCSS

Customizing the appearance of an input range slider in TailwindCSS can seem challenging at first, but with the right classes and utilities, you can easily style it without writing custom CSS. This guide explains how to change the color of a slider using TailwindCSS.

Quick Solution

TailwindCSS provides the accent utility to change the color of form elements like sliders. Here’s how to use it:

<input type="range" class="accent-red-500" />

This applies the color red-500 to the slider's thumb and track. Check out the TailwindCSS accent utility documentation for more information.

Advanced Customization

If you want more control over the slider's appearance (e.g., changing the thumb size, track background, or thumb color), you can use TailwindCSS's arbitrary variants. Here’s how:

<input
  type="range"
  class="appearance-none bg-transparent 
    [&::-webkit-slider-runnable-track]:h-2 
    [&::-webkit-slider-runnable-track]:bg-gray-300 
    [&::-webkit-slider-thumb]:h-6 
    [&::-webkit-slider-thumb]:w-6 
    [&::-webkit-slider-thumb]:appearance-none 
    [&::-webkit-slider-thumb]:rounded-full 
    [&::-webkit-slider-thumb]:bg-blue-500"
/>

Explanation:

• appearance-none: Removes the default browser styling of the slider.
• bg-transparent: Makes the default slider track transparent.
• &::-webkit-slider-runnable-track: Styles the slider's track.
  • bg-gray-300: Sets the background color.
  • h-2: Adjusts the height of the track.
• &::-webkit-slider-thumb: Styles the slider's thumb.
  • appearance-none: Removes default browser styling from the thumb.
  • h-6 and w-6: Adjust the thumb's height and width.
  • bg-blue-500: Sets the thumb's color.
  • rounded-full: Makes the thumb circular.

This method is compatible with modern browsers that support -webkit-slider pseudo-elements.

Using @apply for Cleaner Code

If you use sliders frequently, you can simplify your markup by defining a reusable class in your CSS file using the @apply directive.

Example:

CSS (src/index.css):

.slider {
  @apply appearance-none bg-transparent;
  @apply [&::-webkit-slider-runnable-track]:h-2 [&::-webkit-slider-runnable-track]:bg-gray-300;
  @apply [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:appearance-none;
  @apply [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-blue-500;
}

HTML:

<input type="range" class="slider" />

This approach follows the DRY (Don’t Repeat Yourself) principle, making your code easier to maintain.

FAQ

1. Why doesn’t the accent class style the entire slider?

The accent utility only changes the browser’s default color for form elements. For finer control, use the appearance-none utility and TailwindCSS's pseudo-class support.

2. Does this work in all browsers?

Modern browsers like Chrome, Edge, and Safari support -webkit-slider pseudo-elements. However, for maximum compatibility, test your sliders in all target browsers.

3. Can I make the slider responsive?

Yes, you can use Tailwind’s responsive utilities to adjust the slider’s size and appearance based on screen size. For example:

<input
  type="range"
  class="appearance-none bg-transparent 
    [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 
    sm:[&::-webkit-slider-thumb]:h-6 sm:[&::-webkit-slider-thumb]:w-6"
/>

4. How can I change the slider’s color dynamically?

Use JavaScript to toggle classes dynamically based on user input or events. For example:

const slider = document.querySelector('input[type="range"]')
slider.addEventListener('input', (event) => {
  if (event.target.value > 50) {
    slider.classList.add('accent-green-500')
    slider.classList.remove('accent-red-500')
  } else {
    slider.classList.add('accent-red-500')
    slider.classList.remove('accent-green-500')
  }
})