Slider

Usage

import { Slider } from '@raystack/apsara/v1'
 
<div style={{ width: "400px" }}>
  <Slider
    variant="single"
    label="Single Value"
    defaultValue={50}
    onChange={(value) => console.log(value)}
  />
</div>
 
<div style={{ width: "400px" }}>
  <Slider
    variant="range"
    label={["Start", "End"]}
    defaultValue={[20, 80]}
    onChange={(value) => console.log(value)}
  />
</div>

Slider Props

Examples

Variant

<Slider variant="single" label="Value" defaultValue={50} />

Controlled Usage

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

(function ControlledRangeSlider() {
  const [value, setValue] = React.useState(50);
 
  return (
    <Flex
      direction="column"
      gap="medium"
      align="center"
      style={{ width: "400px" }}
    >
      <Slider
        variant="single"
        value={value}
        label="Value"
        onChange={(newValue) => setValue(newValue as number)}
      />
      <Text>Value {value}</Text>
    </Flex>
  );
})

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

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

Screen Reader Considerations

• 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