Slider

import { Slider } from '@tangible/ui';

Interactive docs and examples: Slider in Storybook.

Slider props

Prop	Type	Default	Description
`aria-label?`	`string`
`aria-labelledby?`	`string`
`className?`	`string`
`defaultValue?`	`number`		Uncontrolled initial value. Defaults to `min`.
`disabled?`	`boolean`	`false`
`endLabel?`	`ReactNode`		Label rendered under the track's end edge (e.g. "More rounded").
`getValueText?`	`(value: number) => string`		Human-readable value for assistive tech (`aria-valuetext`), e.g. `(v) =>` ${v} pixels``. Without it screen readers announce the number.
`id?`	`string`
`max?`	`number`	`100`	Maximum value. Defaults to 100.
`min?`	`number`	`0`	Minimum value. Defaults to 0.
`onValueChange?`	`(value: number) => void`		Called with the new value on every change.
`segments?`	`number`	`1`	Track segmentation: renders the track as this many pill segments with gaps between them, and (unless `step` says otherwise) snaps the value to the segment boundaries. `1` (default) is a continuous track.
`startLabel?`	`ReactNode`		Label rendered under the track's start edge (e.g. "Less rounded").
`step?`	`number`		Step increment. Defaults to 1 — except on a segmented track, where it defaults to the segment span so the value snaps to segment boundaries. Pass an explicit step to override either default.
`value?`	`number`		Controlled value.

Stories: Basic, Segmented, Stepped values, Disabled (interactive page).

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.