ui
GitHub

Slider

A control for selecting a value within a range.

Docs
slider-demo.tsx
import { Slider } from "@/components/ui/slider"
 
export function SliderDemo() {
	return <Slider className="max-w-100" defaultValue={50} />
}

Installation

npx shadcn@latest add @9ui/slider

Usage

Imports
import { Slider, SliderValue } from "@/components/ui/slider"
Anatomy
<Slider>
	<SliderValue />
</Slider>

Examples

Disabled

slider-disabled-demo.tsx
import { Slider } from "@/components/ui/slider"
 
export function SliderDisabledDemo() {
	return <Slider className="max-w-100" defaultValue={50} disabled />
}

Range

slider-range-demo.tsx
import { Slider } from "@/components/ui/slider"
 
export function SliderRangeDemo() {
	return <Slider className="max-w-100" defaultValue={[20, 80]} />
}

With Value

slider-with-value-demo.tsx
import { Slider, SliderValue } from "@/components/ui/slider"
 
export function SliderWithValueDemo() {
	return (
		<Slider className="max-w-100" defaultValue={50}>
			<div className="flex justify-between">
				<span className="text-muted-foreground mt-3 text-xs font-medium">
					Opacity
				</span>
				<SliderValue />
			</div>
		</Slider>
	)
}