Slider

Range slider with pointer drag and step snapping.

Preview

Installation

npx drivn add slider

Usage

1 "use client"
2 
3 import { useState } from "react"
4 import { Slider } from "@/components/ui/slider"
5 
6 export default function Page() {
7   const [volume, setVolume] = useState(50)
8 
9   return (
10     <Slider
11       value={volume}
12       onChange={setVolume}
13     />
14   )
15 }

Sizes

Three sizes for different UI densities.

Orientation

Set orientation to vertical for volume controls, equalizers, or vertical ranges.

Steps

Constrain values to discrete increments with the step prop.

Disabled

Reduce opacity and prevent interaction with the disabled prop.

With Labels

Compose with your own labels for a complete form field.

0100

API Reference

Prop	Type	Default	Description
`value`	number	—	Controlled value
`defaultValue`	number	0	Initial value (uncontrolled)
`min`	number	0	Minimum value
`max`	number	100	Maximum value
`step`	number	1	Step increment
`onChange`	(value: number) => void	—	Value change callback
`disabled`	boolean	false	Disable interaction
`orientation`	'horizontal' \| 'vertical'	'horizontal'	Slider axis direction
`size`	'sm' \| 'md' \| 'lg'	'md'	Track and thumb size
`name`	string	—	Form field name for hidden input
`className`	string	—	Additional CSS classes

1	"use client"
2
3	import { useState } from "react"
4	import { Slider } from "@/components/ui/slider"
5
6	export default function Page() {
7	const [volume, setVolume] = useState(50)
8
9	return (
10	<Slider
11	value={volume}
12	onChange={setVolume}
13	/>
14	)
15	}