Slider
Selects one value or an ordered range along a horizontal or vertical track.
Contract
| Axis | Behavior |
|---|---|
| value | a single slider accepts a number or one-item array; ranges use an ordered array and one indexed Thumb per value |
| range | min, max, step, and minStepsBetweenValues constrain pointer and keyboard changes |
| form | name serializes the current thumb values through native hidden inputs |
| validation | TRSlider has no native required; put business rules on TRField.Root, show TRField.Error, and focus the invalid thumb |
Use uiSize="md" when the slider is part of a dense control surface.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/slider.css';Scroll inside the code area to read long lines.
Imports
import { TRSlider } from '@tinyrack/ui/components/slider';
import { TRField } from '@tinyrack/ui/components/field';
import { TRForm } from '@tinyrack/ui/components/form';
import { TRButton } from '@tinyrack/ui/components/button';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Disabled slider permalink
Disable the root when the value is visible but unavailable for interaction or submission.
Two-thumb range permalink
Root formats visible values with Intl.NumberFormat; each Thumb supplies value text that explains its role to assistive technology.
Field-owned validation and focus recovery permalink
Submit below 60% to focus the thumb and reveal the error. Raise the value to clear it, then submit again.
API
Root, Label, Value, Control, Track, Indicator, Thumb, and their prop and state types are exported from @tinyrack/ui/components/slider. Root accepts either a scalar number for one thumb or a readonly number array; use an array for ranges and give every range Thumb its zero-based index so SSR and hydration map it to the correct value.
| Purpose | Public props and defaults |
|---|---|
| scale | min={0}, max={100}, step={1}, and largeStep={10} |
| layout | `orientation="horizontal" |
| range | minStepsBetweenValues={0}; `thumbCollisionBehavior="push" |
| thumb edge | `thumbAlignment="center" |
| state and forms | controlled value or defaultValue, disabled={false}, plus name and optional external form |
Use format and locale on Root to configure the Intl.NumberFormat output
rendered by Value. Give each Thumb a concise accessible name, then use
getAriaValueText(formattedValue, value, index) when the formatted number needs
role context such as “Starts at 20 percent.” A fixed aria-valuetext is suitable
only when that text stays correct as the value changes.
onValueChange reports live pointer and keyboard changes; use
onValueCommitted for work that should run once after a completed interaction.
Arrow keys change by step, Page Up/Page Down and Shift+Arrow use largeStep,
and Home/End move to the bounds. name creates native range inputs for form
submission, while inputRef on Thumb reaches the corresponding input for focus
recovery. minStepsBetweenValues and thumbCollisionBehavior define how range
thumbs approach or cross each other.