Skip to main content

Slider

Accessible range input with filled track, label, hint, error states, continuous or stepped snapping, and optional value display.

Continuous (default)

Every whole number from 0 to 100.

Stepped

Snaps to whole stars only.

Stepped with larger increments

Disabled

Error

API

PropRequiredTypeDefaultDescription
themeOptionalSiteThemeatelierVisual theme.
variantOptional"continuous" | "stepped"continuousContinuous uses step=1 for whole-number values; stepped snaps to larger increments (e.g. 10).
label / hint / errorOptionalstringField shell labels and validation.
min / maxOptionalnumberRange bounds.
stepOptionalnumber1Increment — 1 for every whole number (continuous), or larger for stepped (e.g. 10).
value / onChangeOptionalnative rangeControlled slider value.
showValueOptionalbooleanShows current value beside the track.
valueLabelOptional(value) => stringCustom formatter for aria-valuetext and display.