Components

Slider

A draggable input for picking a value or a range within a bounded interval.

Range

Usage

import { Slider } from '@onersoft/design-system'

<Slider defaultValue={[50]} min={0} max={100} step={1} aria-label="Volume" />
<Slider defaultValue={[10, 40]} min={0} max={100} aria-label="Range" />

Props

Mirrors Radix Slider.

PropTypeDefault
value / defaultValuenumber[]
min / maxnumber0 / 100
stepnumber1
disabledbooleanfalse
orientation'horizontal' | 'vertical''horizontal'
aria-label / aria-labelledbystring

When neither aria-label nor aria-labelledby is provided, thumbs fall back to 'Value'.

On this page