Slider

v0.4.4

Ready for Production

Catalyst Slider extends Radix UI's Slider primitive with built-in CVA variants, design-token styling, and dark-mode support — giving you a fully accessible, production-ready range input with support for single values, dual-thumb ranges, and optional segment markers.

Installation

npm install @pmi/catalyst-slider

import { SliderRoot, SliderTrack, SliderRange, SliderThumb, SliderSegment } from '@pmi/catalyst-slider';

Common Patterns

Range

Select a range of values using two thumbs.

With Segments

Display visual tick markers at each step position along the track.

Range with Segments

Combine dual-thumb range selection with segment markers.

Disabled State

Slider with Label

Slider Range with Label

Slider with Output

Slider Range with Output

Slider with Reference Labels

Slider with Range Labels

API Reference

Slider is a compound component built on Radix UI Slider. The sections below summarize the Catalyst-specific API surface for each part.

SliderRoot

The root container that manages slider state and orientation. Accepts all standard Radix Slider Root props and forwards ref.

SliderTrack

The track element that contains the filled range. Accepts all standard Radix Slider Track props and forwards ref.

SliderRange

The filled portion of the track representing the selected value or range. Accepts all standard Radix Slider Range props and forwards ref.

SliderThumb

The draggable handle for selecting values. Render one thumb for a single value, two for a range. Accepts all standard Radix Slider Thumb props and forwards ref.

SliderSegment

An optional visual tick marker positioned along the track at a given percentage. Not a Radix primitive — this is a Catalyst-only addition.

Accessibility

Slider is designed to meet WCAG 2.2 AA standards.

Keyboard Interactions

ARIA

• Radix renders role="slider" on each thumb and keeps aria-valuenow, aria-valuemin, and aria-valuemax in sync automatically.
• aria-disabled is set when disabled is true.
• Always provide an accessible name on every SliderThumb (WCAG 2.2 SC 4.1.2). Two approaches are supported:
  • aria-label — use when there is no visible label: <SliderThumb aria-label="Volume" />
  • aria-labelledby — use when a visible label element is present: assign id to the label and reference it on the thumb: <SliderThumb aria-labelledby={labelId} />. For range sliders with two thumbs, combine the group label id with a per-thumb id: aria-labelledby={"${labelId} ${thumbId}"}".

See the Radix Slider accessibility docs for the full baseline behavior.

Choosing the Right Component

Use Slider when users need to select a numeric value or range by dragging. Reach for a different primitive when:

Related

• Switch
• Radio Group
• Text Field
• Checkbox