FORMS

Slider

Memphis-bordered slider with one or more thumbs. Built on Radix Slider — full keyboard support, drag handling, and ARIA semantics come from the primitive.

Import

import { Slider } from 'damo-ui'

Single thumb

<Slider defaultValue={[40]} max={100} step={1} />

Range slider

Pass two values to render a range with a primary fill between them.

<Slider defaultValue={[20, 80]} max={100} step={1} />

Vertical

Wrap the Slider in a container with an explicit height — the vertical orientation makes the Slider fill its parent's height.

1<div className="h-40">
2  <Slider
3    defaultValue={[60]}
4    orientation="vertical"
5    max={100}
6    step={1}
7  />
8</div>

Props

Slider props
PropTypeDefaultDescription
valuenumber[]—Controlled value(s). Pair with onValueChange.
defaultValuenumber[]—Uncontrolled initial value(s).
onValueChange(values: number[]) => void—Fires while dragging or with keyboard arrows.
minnumber0Minimum value.
maxnumber100Maximum value.
stepnumber1Increment for arrow-key changes.
orientation'horizontal' | 'vertical''horizontal'Drag axis. Vertical sliders need an explicit height on the wrapper.
disabledboolean—Disables interaction.
invertedbooleanfalseReverse the visual direction (right-to-left or top-to-bottom).

Accessibility

  • Each thumb is a role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow.
  • Provide context with aria-label or aria-labelledby — what does the value represent?
  • Keyboard: arrows step by step, Home/End jump to min/max, PageUp/PageDown move by 10× step.
← SwitchSegmentedControl →