Slider

A range input — one thumb or two, with keyboard control and multi-thumb constraints.

A range input driven by seed-design's headless engine, so the keyboard model, the pointer maths and multi-thumb constraints are theirs by construction. Pass one value for a simple slider, two for a range.

Nothing in the app crisp measures from ships a slider, so unlike the rest of crisp there is nothing measured to draw on here. The geometry is seed's own — a 26px control row, a 4px track, a 20px thumb whose disc grows to 1.2× while dragging — and crisp's spacing scale maps onto seed's dimensions exactly, so it is a translation rather than an approximation. Only the colours are crisp's: the brand fill it uses for Progress and the white control disc it uses for Switch.

Available since@crisp-ui-kit/crisp@0.11.0

Installation

npm install @crisp-ui-kit/crisp

Props

SliderProps is a straight re-export of SliderRootProps from @seed-design/react-slider — crisp restyles the slider through its recipe but adds no props of its own, and forwards everything to the engine. A generated table would therefore list the engine's ~300 inherited props, so the meaningful surface is given here; SliderRootProps also extends HTMLAttributes<HTMLDivElement> (minus dir), so every native div attribute is accepted too.

Note the plurals: the slider is multi-thumb by design, so the value props are values / defaultValues and the handlers are onValuesChange / onValuesCommit.

Prop	Type	Default	Description
`min`	`number`	—	Required. Lower bound of the track.
`max`	`number`	—	Required. Upper bound of the track.
`values`	`number[]`	—	Controlled thumb positions, one entry per thumb.
`defaultValues`	`number[]`	`[(min + max) / 2]`	Uncontrolled initial positions; also sets the thumb count.
`onValuesChange`	`(value: number[]) => void`	—	Fires on every drag step.
`onValuesCommit`	`(value: number[]) => void`	—	Fires once, when the drag settles.
`step`	`number`	`1`	Granularity of each move.
`allowedValues`	`number[]`	`[]`	Snap targets. Empty means snap to every step.
`minStepsBetweenThumbs`	`number`	`0`	Minimum gap between adjacent thumbs.
`disabled`	`boolean`	`false`	Blocks interaction.
`readOnly`	`boolean`	`false`	Renders the value but refuses edits.
`invalid`	`boolean`	`false`	Marks the control invalid for assistive tech.
`name`	`string`	—	Name for the hidden input, for form submission.
`dir`	`"ltr" \| "rtl"`	`"ltr"`	Must be passed, not inherited — see below.
`jumpMultiplier`	`number`	`10`	Steps moved by `PageUp` / `PageDown`.
`valueIndicatorTrigger`	`"active" \| "hover" \| "auto"`	`"auto"`	When the value bubble shows.
`dragStartDelayInMilliseconds`	`number`	`150`	Delay before a press becomes a drag.
`getAriaValuetext`	`(value: number) => string`	—	Human-readable value for screen readers.
`getAriaLabel` / `getAriaLabelledby`	`(thumbIndex: number) => string`	—	Per-thumb accessible naming.
`getValueIndicatorLabel`	`(params: { value, thumbIndex }) => ReactNode`	`(params) => params.value`	Content of the value bubble.

Direction

dir must be passed, not inherited. The engine writes dir on the root from its own prop, which defaults to "ltr" — so a slider inside an RTL app renders left-to-right unless you pass dir="rtl". That also drives the pointer maths, so the two can never disagree.

Usage

import { Slider } from "@crisp-ui-kit/crisp";

const [values, setValues] = React.useState([40]);

<Slider min={0} max={100} values={values} onValuesChange={setValues} />;

Examples

Range

Two values render two thumbs. minStepsBetweenThumbs keeps them from crossing.