Slider

Use a slider when a value can be selected along a known range.

Margin42%

Price range

Show codeCopy

Import

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

Values and ranges

Use value with onValueChange for a controlled value. Pass an array with one value for a single thumb or two values for a range. defaultValue keeps the component uncontrolled. Set min, max, and step to match the domain rather than translating values after selection.

States

Use disabled when the value cannot be changed. The component dims disabled tracks and prevents thumb interaction. Keep the current value visible when it helps users understand the selected setting.

Accessibility

Always provide an accessible label with aria-label or a visible <Label>.

Best practices

• Label each thumb when a range has two independently adjustable values.
• Use a number input alongside the slider when precise entry matters.
• Avoid sliders for a small set of discrete choices; use a select or radio group instead.