Tailwind CSS Range Slider - React

Use our Tailwind CSS Slider component in your web projects. The Slider can be used for adjusting settings such as volume, brightness, or applying image filters.

See below our beautiful Slider example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors so you can adapt it easily to your needs.

import { Slider } from "@material-tailwind/react";
 
export function DefaultSlider() {
  return (
    <div className="w-96">
      <Slider defaultValue={50} />
    </div>
  );
}

Slider Sizes

The Slider component comes with 3 different sizes, that you can change it using the size prop.

import { Slider } from "@material-tailwind/react";
 
export function SliderSizes() {
  return (
    <div className="flex w-96 flex-col gap-8">
      <Slider size="sm" defaultValue={50} />
      <Slider size="md" defaultValue={50} />
      <Slider size="lg" defaultValue={50} />
    </div>
  );
}

Slider Colors

The Slider component comes with 19 different colors that you can change it using the color prop.

import { Slider } from "@material-tailwind/react";
 
export function SliderColors() {
  return (
    <div className="flex w-96 flex-col gap-8">
      <Slider color="blue" defaultValue={50} />
      <Slider color="red" defaultValue={50} />
      <Slider color="green" defaultValue={50} />
      <Slider color="amber" defaultValue={50} />
    </div>
  );
}

Slider with Custom Styles

You can use the className prop to add custom styles to the Slider component.

import { Slider } from "@material-tailwind/react";
 
export function SliderCustomStyles() {
  return (
    <div className="w-96">
      <Slider
        defaultValue={50}
        className="text-[#2ec947]"
        barClassName="rounded-none bg-[#2ec946]"
        thumbClassName="[&::-moz-range-thumb]:rounded-none [&::-webkit-slider-thumb]:rounded-none [&::-moz-range-thumb]:-mt-[4px] [&::-webkit-slider-thumb]:-mt-[4px]"
        trackClassName="[&::-webkit-slider-runnable-track]:bg-transparent [&::-moz-range-track]:bg-transparent rounded-none !bg-[#2ec946]/10 border border-[#2ec946]/20"
      />
    </div>
  );
}