Slider

Installation

bunnpmpnpmyarn
pnpm dlx shadcn@latest add https://shark.vini.one/r/slider.json

Usage

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

<Slider />

Controlled

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

Examples

With label and value

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

Range

Use an array with two values for a range slider.

Vertical

Use orientation="vertical" for a vertical slider.

Disabled

Use the disabled prop to disable the slider.

Min and max

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

Marks

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

Step

Set step to control the slider's granularity.

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

API Reference

Slider

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

SliderLabel

Label for the slider. Required for accessibility.

SliderValue

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

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