Slider

forms

Range slider with custom-styled track, fill progress indicator, circular thumb, label, value display with optional formatter, disabled state, and full ARIA slider pattern (aria-valuemin/max/now/text).

Import

typescript
import { Slider } from "packages/ui/src";

Props

SliderProps

PropTypeRequired
valuenumberNo
minnumberNo
maxnumberNo
stepnumberNo
onChange(value) => void, label?: string, showValue?: boolean, formatValue?: (v) => string, disabled?: booleanNo

Examples

Slider Component

Range slider with custom track, fill indicator, label, value display, formatter, and full ARIA slider pattern. 44th component.

Volume (with value display)

Volume65

Price Range (with formatter)

Max Price$250

Opacity (with percentage)

Opacity80%

Disabled

Locked50

Metadata

Component Metadata
Familyforms
FrameworksNext.js, Astro/EmDash
DescriptionRange slider with custom-styled track, fill progress indicator, circular thumb, label, value display with optional formatter, disabled state, and full ARIA slider pattern (aria-valuemin/max/now/text).
PropsSliderProps (value?: number, min?: number, max?: number, step?: number, onChange?: (value) => void, label?: string, showValue?: boolean, formatValue?: (v) => string, disabled?: boolean)
Statesdefault, dragging, disabled, with-label, with-value
A11y
  • Native range input for keyboard support
  • aria-label from label prop
  • aria-valuemin/max/now/text
  • Focus ring on keyboard navigation
Responsive
  • Full-width by default
  • Track fills container
Motion
  • Fill width transition
  • Thumb grab cursor
Token Dependencies
  • components.slider.trackHeight
  • components.slider.trackBackground
  • components.slider.trackBorderRadius
  • components.slider.fillColor
  • components.slider.thumbSize
  • components.slider.thumbColor
  • components.slider.thumbBorder
  • components.slider.thumbShadow
  • components.slider.labelColor
  • components.slider.labelFontSize
  • components.slider.valueColor
  • components.slider.valueFontSize
  • components.slider.focusRing
  • components.slider.disabledOpacity
Content Slotslabel (string), formatValue ((v) => string)
CMS Bindings
  • Min/max from CMS config
  • Label from CMS field
Test Cases
  • Renders range input
  • Shows label text
  • Shows value when showValue
  • Calls onChange on input
  • Has aria-valuemin/max/now
  • Formats value with formatter
  • Disabled has disabled class
  • Passes className through