SliderA control that allows users to select a value or range from a given range.

Install the component from your command line.

npm install @raystack/apsara

Usage

Import and usage examples:

import { Slider } from '@raystack/apsara/v1'

// Single value slider

<div style={{ width: "400px" }}>
  <Slider
    variant="single"
    label="Single Value"
    defaultValue={50}
    onChange={(value) => console.log(value)}
  />
</div>

// Range slider with individual labels

<div style={{ width: "400px" }}>
  <Slider 
    variant="range" 
    label={["Start", "End"]}
    defaultValue={[20, 80]} 
    onChange={(value) => console.log(value)} 
  />
</div>

Props

The Slider component accepts the following props:

variant: The type of slider ("single" | "range", default: "single")
value: Controlled value - number for single, [number, number] for range
defaultValue: Initial value - number for single, [number, number] for range
min: Minimum value (default: 0)
max: Maximum value (default: 100)
step: Step increment (default: 1)
label: Label text to display above thumb(s). For range slider, can be a string or [string, string] for individual thumb labels
onChange: Callback when value changes - (value: number | [number, number]) => void
className: Additional CSS class name
All other valid HTML div attributes

Examples

Single Value Slider

Range Slider with Individual Labels

A range slider that allows you to set different labels for both the minimum and maximum value thumbs.

With Custom Range

Customize the slider's minimum, maximum, and step values to create a more specific range of values.

Controlled Range Component

A controlled range slider that maintains and updates its state through React's useState hook.

Controlled Single Value

A controlled single-value slider that demonstrates how to manage the slider's state programmatically.

Accessibility

The Slider component follows WAI-ARIA guidelines for the Slider Pattern.

ARIA Attributes

The component handles the following ARIA attributes:

aria-label: Provides an accessible name for the slider
aria-valuetext: Provides a human-readable text alternative for the current value
aria-valuemin: Set automatically based on the min prop
aria-valuemax: Set automatically based on the max prop
aria-valuenow: Updated automatically as the value changes

Example with Custom ARIA Labels

Each thumb in a range slider has its own accessible label
Values are announced as they change
The component supports both mouse and keyboard interactions
Labels are properly associated with their respective thumbs