Slider

A value picker — pass an array for a range and the extra thumbs are rendered for you.

Memory

128

<Sliderlabel="Memory"defaultValue={128}min={64}max={512}step={64}showValue/>

Slider is for a value whose position between two bounds matters more than its exact figure — memory, concurrency, a price filter. When the number itself is the point, use NumberField.

Usage

tsx

import { Slider } from "@heyo-sh/heyo-ui";<Slider  label="Memory"  defaultValue={128}  min={64}  max={512}  step={64}  showValue/>;

Ranges

Pass an array and you get a range: the extra thumb, the filled track between them, and an array back from onValueChange.

Price

20 – 80

<Slider label="Price" defaultValue={[20, 80]} showValue />

Labels and descriptions

showValue prints the current value at the right end of the label row — the only place it can go without moving as the thumb does.

Concurrency

How many requests a single worker handles at once.

<Sliderlabel="Concurrency"description="How many requests a single worker handles at once."defaultValue={8}min={1}max={32}showValue/>

Bare and disabled

<Slider defaultValue={40} aria-label="Volume" /><Slider defaultValue={40} disabled aria-label="Volume" />

Properties

value / defaultValuenumber | number[]optional

Controlled and uncontrolled value. An array makes it a range.

onValueChange(value) => voidoptional

Fires while dragging, with the same shape you passed in.

onValueCommitted(value) => voidoptional

Fires once, when the thumb is released — the right place for a request.

min / max / stepnumberoptional

Bounds and increment. They default to 0, 100 and 1.

labelReactNodeoptional

The label row above the track.

showValuebooleanoptional

Prints the current value at the right end of the label row.

descriptionReactNodeoptional

Muted helper text under the control.

disabledbooleanoptional

Dims the track and ignores interaction.

orientation"horizontal" | "vertical"optional

The axis. It defaults to horizontal.

namestringoptional

Form field name, passed through to Base UI.

Loading documentation…