Forms

Slider

Picks a number, or a range, on a track.

import { Slider } from "@flinbu/seed";

Single and range

Opacity

64%

Spacing scale

4px – 24px

The smallest and largest steps, in px.

import { Field, Slider } from "@flinbu/seed";

const [range, setRange] = React.useState<number | number[]>([4, 24]);

<div className="flex w-full max-w-sm flex-col gap-base">
  <Field label="Opacity"><Slider defaultValue={64} step={4} showValue formatValue={(v) => `${v}%`} /></Field>
  <Field label="Spacing scale" hint="The smallest and largest steps, in px."><Slider value={range} onValueChange={setRange} min={0} max={64} step={2} showValue formatValue={(v) => `${v}px`} /></Field>
</div>

Use it for

Values people judge by feel: opacity, size, a range of steps.

Use something else for

Exact numbers: use an Input (or pair them).

Props

Prop	Type	Default	Description
`value / defaultValue`	`numbernumber[]`	–	One number, or two for a range.
`onValueChange`	`(value) => void`	–	While dragging.
`onValueCommit`	`(value) => void`	–	When the person lets go.
`min / max / step`	`number`	`0 / 100 / 1`	Scale.
`showValue`	`boolean`	–	Value at the right.
`formatValue`	`(v: number) => string`	–	Shown and announced text.
`thumbLabels`	`string[]`	–	Names for each thumb.

Accessibility

Built on Radix Slider: arrow keys step, Page Up and Down jump, Home and End go to the ends.
Inside Field the thumb is named by the label; range thumbs are Minimum and Maximum; formatValue sets aria-valuetext.