Slider
A range input for one or two values with track, and range fill.
Current value: 33
Installation
The component is exported from @by/experience-system. Add the package with your package manager:
pnpm add @by/experience-systemIn this monorepo, depend on the workspace package (for example via workspace:* or your catalog) so imports resolve to packages/experience-system.
Composition
SliderUsage
import { Slider } from '@by/experience-system';Slider is a client component ('use client' in the package). Use it inside a Client Component or a dynamic import when using the Next.js App Router.
<Slider defaultValue={[50]} min={0} max={100} step={1} onValueChange={(v) => console.log(v)} />When to use
- Adjusting continuous values (volume, opacity, price bounds) where a spatial control is clearer than typing.
- Range filters (min–max) with two thumbs.
When not to use
- Discrete small option sets—prefer Radio group or Select.
- When the control must not capture pointer drags inside scrollable regions without careful hit-testing—consider layout and
disabledstates.
Examples
Range
Two thumbs by passing value / defaultValue with two numbers.
Range: 20–80
Sizes
size sm vs md (default) for track and thumb density.
SM
MD (default)
With label and value chips
Pair Label with htmlFor / id, and set displayLabel to show values above each thumb (hover tooltips are disabled in that mode).
Volume: 50%
Vertical
Set orientation="vertical" and give the slider a height (for example a fixed h-64 wrapper).
Current value: 50
API Reference
Slider forwards to SliderPrimitive.Root from radix-ui / @radix-ui/react-slider. dir defaults from ThemeProvider unless overridden. value / defaultValue are typed as number[] (one entry per thumb). The tables mirror the upstream Root contract, then list Experience System extensions.
Slider
| Prop | Type | Default |
|---|---|---|
value | number[] | No default value |
defaultValue | number[] | No default value |
onValueChange | function | No default value |
onValueCommit | function | No default value |
min | number | 0 |
max | number | 100 |
step | number | 1 |
minStepsBetweenThumbs | number | No default value |
disabled | boolean | false |
orientation | horizontal | vertical | horizontal |
dir | ltr | rtl | From ThemeProvider (overridable) |
inverted | boolean | No default value |
name | string | No default value |
form | string | No default value |
asChild | boolean | false |
Also accepts standard attributes forwarded to the Radix root node where supported (className, style, id, aria-*, …).
| Design-system extension | Type | Default |
|---|---|---|
size | sm | md | md |
displayLabel | boolean | false |
showValueTooltip | boolean | true |
| Data attribute | Values |
|---|---|
data-slot | slider |
data-disabled | Present when disabled |
| Data attribute (track) | Values |
|---|---|
data-slot | slider-track |
| Data attribute (range) | Values |
|---|---|
data-slot | slider-range |
| Data attribute (thumb) | Values |
|---|---|
data-slot | slider-thumb |
Accessibility
Implements the Slider WAI-ARIA pattern via Radix. See Radix Slider — accessibility. Associate a visible Label with htmlFor / id when the slider is not labelled by surrounding text alone.
Keyboard interactions
| Key | Description |
|---|---|
ArrowRight / ArrowUp | Increases the value (respects orientation and dir). |
ArrowLeft / ArrowDown | Decreases the value. |
Home | Sets the thumb to min. |
End | Sets the thumb to max. |
PageUp | Increases by a larger step (platform convention). |
PageDown | Decreases by a larger step. |
Source in the repo: packages/experience-system/src/components/Slider/Slider.tsx. Agent-oriented contracts: packages/experience-system/src/components/Slider/Slider.instructions.md.