Slider

Single-value or dual-thumb range slider with steps, tick marks and keyboard control.

@ruckc/truss-ui Choice

Import

import { Slider } from '@ruckc/truss-ui';

Playground

API

Prop	Type	Default	Description
`value` bindable	`number \| [number, number] \| null`	`0`	A number for a single thumb, or [low, high] for a range.
`min`	`number`	`0`	Minimum allowed value.
`max`	`number`	`100`	Maximum number to show before collapsing the rest.
`step`	`number`	`1`	Increment between values.
`label`	`string`	—	Visible label shown above the control.
`ariaLabel`	`string`	—	Accessible name, for use when there is no visible `label`.
`format`	`(n: number) => string`	`(n: number) => String(n)`	Formats a number for display.
`marks`	`boolean`	`false`	Show a tick per step (when there are ≤ 50).
`numberInput`	`boolean`	`false`	Show a number box synced with the slider, inside the same labelled control (the box takes its accessible name from `label` / `ariaLabel`). Single-value sliders only: a range slider ignores it (use two NumberInputs for exact range entry).
`inputMin`	`number`	—	Lowest number the box accepts. Defaults to `min`; set it lower to let the box go past the track.
`inputMax`	`number`	—	Highest number the box accepts. Defaults to `max`. The thumb stays on the track while the bound value keeps the typed number.
`nullable`	`boolean`	`false`	Let the value be `null` ("off"). A built-in switch named "Enable <label>" is added to the same labelled control; while off, the thumb rests at the start of the track, the value reads `offLabel` and the slider and number box are inert. Single-value sliders only: a range slider ignores it.
`offLabel`	`string`	`'Off'`	Text shown instead of the value while a `nullable` slider is off. Defaults to "Off".
`defaultValue`	`number`	—	What switching a `nullable` slider on restores when there is no earlier value to return to. Falls back to `min`.
`disabled`	`boolean`	`false`	Disables the control: it cannot be focused, changed or activated.