Slider

A slider for selecting a value from a range.

Installation


pnpm dlx shadcn@latest add @shark/slider


import { Slider } from "@/components/ui/slider";


<Slider />

Control the value with value and onValueChange for a controlled slider.

Greater than 80

❌

Use <Field>, <SliderLabel>, and <SliderValue> for accessible labelling and to show the current value.

Use an array with two values for a range slider.

Use orientation="vertical" for a vertical slider.

Use the disabled prop to disable the slider.

Set min and max to constrain the slider's value range.

Volume50

The showMarkers and markerInterval props display markers and control the interval between them.

Set step to control the slider's granularity.

Use with showMarkers and markerLabels to show custom labels on the markers.

Storage size

Marks are only supported for horizontal sliders.

Root component. Manages value, track, range, and thumb(s).

Prop	Type	Default
`value`	`number[]`	-
`defaultValue`	`number[]`	-
`onValueChange`	`(details: ValueChangeDetails) => void`	-
`min`	`number`	`0`
`max`	`number`	`100`
`step`	`number`	`1`
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`
`disabled`	`boolean`	`false`
`showMarkers`	`boolean`	`false`
`markerInterval`	`number`	`1`
`markerLabels`	`string[]`	`[]`
`className`	`string`	-

Label for the slider. Required for accessibility.

Prop	Type	Default
`className`	`string`	-

Shows the current value. Useful for numeric display or formatting.

Prop	Type	Default
`className`	`string`	-

For a complete list of props, see the Ark UI documentation.

On This Page