DEV Community

Joodi
Joodi

Posted on

3 2 2 1 2

Learn Once and For All How to Change the Color of This Input! 🎨

If you want to change the color of a range slider (or any input element) in your web app using Tailwind CSS, here's how you can do it.

Image description

Changing the Color of Range Slider

To change the color of the slider, you only need to modify the accent-* class in Tailwind CSS.

For example:

<Input
  type="radio"
  name="exam"
  value={exam.id}
  onChange={() => {}}
  className="cursor-pointer accent-primary w-4 h-4"
/>
Enter fullscreen mode Exit fullscreen mode

What to Change

The part of the code we want to change is the accent-primary class. This is the class that determines the color of the slider. If you want a different color, you can replace accent-primary with any of the Tailwind colors, like:

  • accent-red-500
  • accent-blue-500
  • accent-green-500

For example:

<Input
  type="radio"
  name="exam"
  value={exam.id}
  onChange={() => {}}
  className="cursor-pointer accent-red-500 w-4 h-4"
/>
Enter fullscreen mode Exit fullscreen mode

This will change the color of the slider to red.

Conclusion

Changing the color of the range slider is simple. You just need to modify the accent-* class in Tailwind CSS.

That's it! Easy customization with Tailwind. 🎨

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (0)

Image of Docusign

πŸ› οΈ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay