/// Inputs
Slider
Range control with a hairline track, ink fill, and square thumbs — single value or a min/max range.
import { Slider } from "@protocore/pds";Basics
Pass a single number for one thumb. onValueChange echoes back the shape you supplied — a plain number here.
CPU throttle: 60%
Range
Pass a number[] and the Slider renders one thumb per entry, giving you a min/max range. onValueChange returns an array.
Autoscale between 20 and 80 replicas
Steps & marks
Constrain movement with step and draw tick marks at raw values with marks — handy for a small, labelled scale like log verbosity.
When to use it
Use a Slider for an approximate value on a bounded, continuous range where dragging feels natural and the exact number matters less than the relative position — a throttle, a threshold, an autoscale band. When users need to type or read a precise figure, pair it with (or replace it with) a NumberInput. For a handful of discrete named choices, a SegmentedControl or RadioGroup is clearer than a stepped slider. Always surface the current value in nearby text — the thumb position alone isn't a readout.
Usage
Do
- Show the live value(s) in adjacent text — the track is not a precise readout.
- Give the control an accessible name via `aria-label` or a wrapping `Field`.
- Use a `number[]` value for min/max ranges and a bare `number` for single thumbs.
- Set a sensible `step` so keyboard and drag land on usable increments.
Don't
- Don't use a slider when an exact value must be entered — use NumberInput.
- Don't use it for more than a few discrete options — use a SegmentedControl.
- Don't set so many `marks` that the track becomes visual noise.
- Don't hide the current value; position alone fails for precise or a11y use.
Accessibility
| Keys | Action |
|---|---|
| Tab | Move focus to the (next) thumb. |
| Arrow Left / Down | Decrease the focused thumb by one step. |
| Arrow Right / Up | Increase the focused thumb by one step. |
| Home / End | Jump the focused thumb to the min / max. |
| Page Up / Page Down | Move by a larger increment. |
- Built on Radix Slider: each thumb is a `role="slider"` with `aria-valuemin`, `aria-valuemax`, and `aria-valuenow`.
- Give a clearer `aria-label` per thumb for range sliders where 'minimum' / 'maximum' aids comprehension.
- Thumbs can't cross; each is bounded by its neighbour in a multi-thumb range.
Slider props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | |
className | string | — | |
defaultValue | SliderValue | — | Initial value(s) in uncontrolled mode. |
marks | number[] | — | Optional tick marks drawn on the track at these raw values. |
max | number | 100 | Maximum bound. |
min | number | 0 | Minimum bound. |
onValueChange | ((value: SliderValue) => void) | — | Fires with the next value(s), matching the shape (`number` vs `number[]`) you supplied. |
step | number | 1 | Step increment. |
style | CSSProperties | — | |
value | SliderValue | — | Controlled value(s). A single `number` renders one thumb; a `number[]` renders one thumb per entry. |