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 defaultValue={50} />
}

Installation

npx shadcn@latest add https://9ui.dev/r/slider

Usage

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

Examples

Disabled

slider-disabled.tsx
import { Slider } from "@/components/ui/slider"
 
export function SliderDisabled() {
	return <Slider defaultValue={50} disabled />
}

Range

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

With Value

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