Usage

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

Slider Props

Examples

Variant

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

Controlled Usage

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

1(function ControlledRangeSlider() {
2  const [value, setValue] = React.useState(50);
3
4  return (
5    <Flex
6      direction="column"
7      gap="medium"
8      align="center"
9      style={{ width: "400px" }}
10    >
11      <Slider
12        variant="single"
13        value={value}
14        label="Value"
15        onChange={(newValue) => setValue(newValue as number)}
16      />
17      <Text>Value {value}</Text>
18    </Flex>
19  );
20})

Thumb Size

Different thumb sizes for various use cases and visual preferences.

1<Flex
2  direction="column"
3  gap="extra-large"
4  align="center"
5  style={{ width: "400px" }}
6>
7  <Slider
8    variant="single"
9    label="Large Thumb"
10    defaultValue={50}
11    thumbSize="large"
12  />
13  <Slider
14    variant="single"
15    label="Small Thumb"
16    defaultValue={50}
17    thumbSize="small"
18  />
19</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

1<div style={{ width: "400px" }}>
2  <Slider
3    variant="range"
4    label={["Start Date", "End Date"]}
5    defaultValue={[20, 80]}
6    aria-label="Date range selector"
7    aria-valuetext="From January 20 to January 80"
8    onChange={value => console.log(value)}
9  />
10</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