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.

Slider Demo

Here's how to implement a simple and responsive Slider component. It is perfect for adjusting volume, brightness, or filters.

import { Slider } from "@material-tailwind/react";

export function SliderDemo() {
  return (
    <div className="w-64">
      <Slider>
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
    </div>
  );
}
import { Slider } from "@material-tailwind/react";

export function SliderDemo() {
  return (
    <div className="w-64">
      <Slider>
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
    </div>
  );
}

Slider Sizes

We provide different slider sizes like sm, md, and lg so you can adapt it easily to your needs. You can simply use the size prop to change the slider size.

In the example below, we've showcased the different slider sizes that you can use in your project.

import { Slider } from "@material-tailwind/react";

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

export function SliderSizes() {
  return (
    <div className="flex w-64 flex-col gap-8">
      <Slider size="sm">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider size="md">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider size="lg">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
    </div>
  );
}

Slider Colors

We provide different slider colors like primary, secondary, info, success, warning, and error so you can adapt it easily to your needs. You can simply use the color prop to change the slider color.

In the example below, we've showcased the different slider colors that you can use in your project.

import { Slider } from "@material-tailwind/react";

export function SliderColors() {
  return (
    <div className="flex w-64 flex-col gap-8">
      <Slider color="primary">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="secondary">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="info">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="success">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="warning">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="error">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
    </div>
  );
}
import { Slider } from "@material-tailwind/react";

export function SliderColors() {
  return (
    <div className="flex w-64 flex-col gap-8">
      <Slider color="primary">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="secondary">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="info">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="success">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="warning">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
      <Slider color="error">
        <Slider.Range />
        <Slider.Thumb />
      </Slider>
    </div>
  );
}

Slider with Ticks

You can use tick or labels for slider using the SliderTick component. In the example below, we've showcased a slider with ticks that you can use in your project.

0102030405060708090100
import { Slider } from "@material-tailwind/react";

export function SliderWithTicks() {
  return (
    <div className="w-80">
      <Slider>
        <Slider.Range />
        <Slider.Thumb />
        <Slider.Tick />
      </Slider>
    </div>
  );
}
import { Slider } from "@material-tailwind/react";

export function SliderWithTicks() {
  return (
    <div className="w-80">
      <Slider>
        <Slider.Range />
        <Slider.Thumb />
        <Slider.Tick />
      </Slider>
    </div>
  );
}

Range Slider with Two Thumbs

You can make the Slider component to be a range slider by providing two values for the value prop, and for that you need to make the Slider component a controlled component and provide the value and onValueChange props for the Slider component.

In the example below, we've showcased a range slider with two thumbs and ticks that you can use in your project.

0102030405060708090100
import * as React from "react";
import { Slider } from "@material-tailwind/react";

export function RangeSliderWithTwoThumbs() {
  const [value, setValue] = React.useState([20, 80]);

  return (
    <div className="w-80">
      <Slider value={value} onValueChange={setValue}>
        <Slider.Range />
        <Slider.Thumb />
        <Slider.Tick />
      </Slider>
    </div>
  );
}
import * as React from "react";
import { Slider } from "@material-tailwind/react";

export function RangeSliderWithTwoThumbs() {
  const [value, setValue] = React.useState([20, 80]);

  return (
    <div className="w-80">
      <Slider value={value} onValueChange={setValue}>
        <Slider.Range />
        <Slider.Thumb />
        <Slider.Tick />
      </Slider>
    </div>
  );
}