Slider

An input where the user selects a value from within a given range.

On this page

Volume

Props

label

orientation

isDisabled

<Slider defaultValue={50}>
  <Label>Volume</Label>
  <SliderControl />
</Slider>

Installation

npm

pnpm

yarn

bun

npx shadcn@latest add @dotui/slider

Use slider to allow users to select a value from within a given range.

import { Slider, SliderControl } from '@/components/ui/slider'

<Slider defaultValue={50}>
  <SliderControl />
</Slider>

Opacity

Adjust the background opacity.

Donuts to buy50 of 100 Donuts

Cookies to

Opacity

Price¥60

Price Range200 - 300

Opacity

Volume50

Adjust the volume.

Opacity

Value: 50

A slider allows a user to select one or more values within a range.

A slider control is the interactive surface that positions the track and thumbs.

A slider track is the visual track that contains the selected fill.

Supports all div attributes.

Prop	Type	Default

A slider fill displays the selected region of the track.

A slider thumb represents an individual value that the user can adjust within a slider track.

Prop	Type	Default
	`ReactNode \| function`	`—`
	`number`	`0`
	`RefObject<HTMLInputElement \| null>`	`—`
	`boolean`	`—`
	`Orientation`	`'horizontal'`

A slider output displays the current value of a slider as text.

Last updated on 6/16/2026