form · Normal DOM only

Slider

Numeric value (or range) on a continuous scale. Radix-backed — keyboard arrows, focus ring, tooltip support.

Use Slider when the value has a natural minimum and maximum (volume 0–100, discount 0–50 %, page weight 0–10 kg). For numeric input without bounds use NumberInput.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Slider } from '@8maverik8/twenty-design';

Examples

Single value

0255075100
tsx
<Slider value={[40]} onValueChange={setValue} marks={[…]} />

Range (two thumbs)

20 – 80
tsx
<Slider value={[20, 80]} onValueChange={setRange} />

Guidelines

✓
Provide marks for any slider longer than ~120 px.Without marks users have no anchor for "what does the middle mean".
✓
Pass step that matches the user-facing precision.step={1} for integers, step={0.01} for currency, step={5} for percentage tiers.
✕
Use a slider for a 2- or 3-value choice.A toggle, RadioGroup or ToggleGroup reads faster.