Slider

A native range input for a value between two bounds.

Overview

Slider is an input with type="range". The browser supplies the keyboard and the value. Name it with aria-label or a Label.

Volume0

Default Value

Min

Max

100

Step

Add the component with the CLI. It copies the files in and installs anything they depend on.

npx vinyaas add slider

1
2
3
4
5
import { Slider } from "@/components/ui/slider";

export function Volume() {
  return <Slider aria-label="Volume" defaultValue={40} />;
}

A labelled range for a setting with a known minimum and maximum.

Volume

min, max, and step stay on the native range input.

Zoom

Two native range inputs share one track. The selected interval uses the foreground token. The rest of the track stays muted.

Price

Playback settings stack labelled sliders for volume, brightness, and text size. Apply saves the values.

Other attributes for the underlying element are passed through.

Name	Type	Default	Description
`value`	number	—	Controlled value. Omit it to use defaultValue.
`defaultValue`	number	—	Initial value for an uncontrolled slider.
`min`	number	`0`	Lowest value.
`max`	number	`100`	Highest value.
`step`	number	`1`	Step between values.
`onValueChange`	(value: number) => void	—	Called with the numeric value when the slider moves.
`className`	string	—	Merged onto the range input with cn.

The control is a native slider. Keyboard users change it with the arrow keys. Give it a name through a label or aria-label.