title | description | navigation | github | prev | next | ||||
---|---|---|---|---|---|---|---|---|---|
Tailwind CSS Range Slider for React - Material Tailwind |
Customise your web projects with our range slider component for Tailwind CSS and React using Material Design guidelines. |
|
slider |
select |
speed-dial |
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.
<CodePreview component={<SliderExamples.DefaultSlider />}>
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.
<CodePreview component={<SliderExamples.SliderSizes />}>
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.
<CodePreview component={<SliderExamples.SliderColors />}>
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.
<CodePreview component={<SliderExamples.SliderCustomStyles />}>
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>
);
}