Slider

Accessible range input supporting single-value and dual-thumb range modes. Ships with three sizes, four semantic colors, optional tick marks with labels, full keyboard navigation, pointer drag, and reduced-motion aware spring animation.

Live Preview

Interact with the Slider component in real time. Switch between single and range modes, and adjust size, color, and disabled state to see changes instantly.

Live Code
tsx
<Slider
  value={40}
  size="md"
  color="primary"
  label="Volume"
  showValue
  onChange={(v) => setValue(v as number)}
/>

Installation

Install the Aidash Components package using your preferred package manager.

$ pnpm add @aidash/components

Import

Import the Slider component into your file.

tsx
import { Slider } from '@/components/aidash/slider';

Basic Usage

Pass a numeric value and an onChange handler to control a single-thumb slider.

Basic Usage
tsx
const [value, setValue] = useState(50);

<Slider
  value={value}
  onChange={(v) => setValue(v as number)}
  label="Brightness"
  showValue
/>

Range

Pass a [min, max] tuple to render two thumbs. Thumbs cannot cross each other.

Range
tsx
const [range, setRange] = useState<[number, number]>([20, 80]);

<Slider
  value={range}
  onChange={(v) => setRange(v as [number, number])}
  label="Price range"
  showValue
  formatValue={(v) => `$${v}`}
/>

Sizes

Three sizes to fit different layout contexts.

Sizes
tsx
<Slider value={40} size="sm" label="Small" showValue />
<Slider value={55} size="md" label="Medium" showValue />
<Slider value={70} size="lg" label="Large" showValue />

Colors

Four color themes for different semantic contexts.

tsx
1<Slider value={30} color="primary" label="Primary" showValue />2<Slider value={65} color="success" label="Success" showValue />3<Slider value={45} color="warning" label="Warning" showValue />4<Slider value={80} color="error" label="Error" showValue />

Marks

Provide an array of marks to render tick dots on the track. Add a label to display text below.

Marks
tsx
<Slider
  value={value}
  onChange={(v) => setValue(v as number)}
  min={0}
  max={100}
  step={25}
  marks={[
    { value: 0, label: '0%' },
    { value: 25, label: '25%' },
    { value: 50, label: '50%' },
    { value: 75, label: '75%' },
    { value: 100, label: '100%' },
  ]}
  label="Zoom"
  showValue
  formatValue={(v) => `${v}%`}
/>

Disabled State

Disabled sliders are dimmed, ignore pointer and keyboard input, and are skipped from the tab order.

Disabled
tsx
<Slider value={35} disabled label="Single disabled" showValue />
<Slider value={[20, 70]} disabled label="Range disabled" showValue />

Accessibility

Built-in ARIA attributes and keyboard support for assistive technology.

role="slider"

Each thumb is a role="slider" button with aria-orientation="horizontal", so screen readers announce it correctly.

Keyboard Navigation

Arrow keys nudge by step, Page Up/Down by 10 × step, Home / End jump to min / max.

aria-valuenow & aria-valuetext

Each thumb exposes aria-valuemin, aria-valuemax, aria-valuenow, and a aria-valuetext derived from formatValue.

Reduced Motion

When prefers-reduced-motion is set, thumb positions update instantly without the spring animation.

Accessibility Example
tsx
{/* Range slider — each thumb gets its own role="slider" button */}
<Slider
  value={[20, 80]}
  onChange={setRange}
  min={0}
  max={100}
  label="Price range"
  formatValue={(v) => `$${v}`}
/>
{/* Renders two <button role="slider" aria-valuenow="..." aria-valuetext="$20"> */}

API Reference

Complete list of props for the Slider component.

SliderProps
PropTypeDefaultDescription
valuenumber | [number, number]—Current value. Pass a tuple to enable range (dual-thumb) mode.
onChange(value: number | [number, number]) => void—Callback fired when the value changes.
minnumber0Minimum selectable value.
maxnumber100Maximum selectable value.
stepnumber1Granularity of value changes.
marksSliderMark[]—Optional tick marks. Each mark { value, label? } renders a dot and optional label.
size'sm' | 'md' | 'lg''md'Track and thumb size.
color'primary' | 'success' | 'warning' | 'error''primary'Filled-track color.
disabledbooleanfalseDisable interaction and dim the slider.
labelstring—Text displayed above the slider.
showValuebooleanfalseShow the current value(s) next to the label.
formatValue(v: number) => string—Custom formatter for displayed and aria-valuetext values.
ariaLabelstring—Fallback aria-label used when no visible label is provided.
classNamestring''Additional CSS classes on the wrapper.
Note
Slider works as either a controlled or uncontrolled component. When you pass a value, you own the state and must update it via onChange. Omit value to let the component manage state internally. Pass a number for single-thumb mode or a [number, number] tuple for dual-thumb range mode.

Related

Other components that work well alongside Slider.

Switch

Toggle switch for binary on/off controls with animated thumb.

Input

Text input fields for forms with validation and icon support.

Progress

Progress indicators for displaying task completion state.