Avala Design
← Components/primitives

Slider

Carbon-spec slider. Wraps Radix Slider for ARIA + keyboard. Carbon's surrounding label / value-input / min-max-labels structure rendered around the Radix root.

primitivesstablea11y: untested3/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Slider } from "@avala/design";

<Slider>Slider</Slider>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-slider--defaultOpen in Storybook →

When to use

  • Numeric input where the range matters more than the precise value (volume, opacity, density, threshold).
  • Bounded ranges with discrete step values where users want spatial feedback.

When not to use

  • Precise numeric input → use the NumberInput pattern.
  • Free-text numeric → use `TextInput` type="number".
  • Unbounded counts → use the NumberInput pattern.