Slider

At a glance

• value and defaultValue are always arrays — pass [n] for single-thumb, [low, high] for range, [a, b, c, ...] for multi-thumb pickers.
• onChange fires continuously while dragging; onValueCommit fires once when the interaction ends.
• Web pointer behavior: clicking the track moves the nearest thumb; dragging keeps the cursor captured even if it strays off the thumb.
• Keyboard: arrow keys ±step (axis follows orientation; horizontal honors dir="rtl" and inverted), PageUp/Down ±10·step (or 10% of range), Home/End to min/max.
• minStepsBetweenThumbs enforces a gap so adjacent thumbs can't overlap.
• dir="rtl" flips the visual mapping for horizontal sliders so the higher value sits on the left.
• Native: tap-to-position + keyboard work; long-press dragging is a future enhancement on RN.

Preview

Single thumb plus a two-thumb range. Drag, click the track, or tab to a thumb and use the arrow keys.

Multi-thumb

Three or more thumbs work the same way as range. minStepsBetweenThumbs enforces a gap so adjacent thumbs can't pass each other.

Vertical

Higher values sit at the top. Arrow Up / Arrow Down change the value (axis follows orientation).

RTL

dir="rtl" flips the visual mapping so the higher value sits on the left. Arrow Right then decreases the value, matching how a reader expects "right" to behave in the opposite reading direction.

Disabled

min, max, step

The slider's value space. min (default 0) and max (default 100) bound the legal range; step (default 1) is the increment that arrow-key changes and snap-on-drag honor. step must divide max - min cleanly — non-integer steps work for currency / fractional sliders.

<Slider defaultValue={[50]} min={0} max={100} step={5} />
<Slider defaultValue={[1.5]} min={0} max={5} step={0.25} />

orientation and length

orientation="horizontal" (default) lays the track left-to-right; vertical runs bottom-to-top. length sets the track size in pixels along its axis — width for horizontal, height for vertical.

<Slider orientation="vertical" length={200} defaultValue={[50]} />

disabled

Greys the track + thumb, blocks pointer + keyboard interaction, and forwards aria-disabled.

<Slider disabled defaultValue={[42]} />

onInteractionStart and onInteractionEnd

Bracket the user's drag / keyboard interaction. onInteractionStart fires once when the user begins driving the slider (pointer down, first arrow key); onInteractionEnd fires once when they stop. Pair with onChange (continuous, every step) and onValueCommit (final value at end of interaction) when the change is expensive enough to debounce.

<Slider
    defaultValue={[50]}
    onInteractionStart={() => analytics.track('slider:start')}
    onInteractionEnd={() => analytics.track('slider:end')}
    onValueCommit={(values) => save(values[0])}
/>

aria-label and ariaLabelForThumb

Slider tracks need an accessible name (aria-label or aria-labelledby on the slider). For multi-thumb sliders, label each thumb individually via ariaLabelForThumb — a function that receives the thumb's index and returns the label string.

<Slider
    aria-label="Price range"
    ariaLabelForThumb={(i) => i === 0 ? 'Minimum price' : 'Maximum price'}
    defaultValue={[20, 80]}
/>

Props