Slider

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

Anatomy

Import and assemble the component:

1import { Slider, SliderValue } from '@raystack/apsara'
2

3<Slider>
4  <Slider.Value />
5</Slider>

API Reference

Root

Renders the slider track and thumb control.

Prop

Type

Value

This component is used to display the current value of the slider.

Prop

Type

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 ControlledSlider() {
2  const [value, setValue] = React.useState(50);
3

4  return (
5    <Flex direction="column" gap={5} align="center" style={{ width: "400px" }}>
6      <Slider
7        variant="single"
8        value={value}
9        label="Value"
10        onValueChange={(newValue) => setValue(newValue as number)}
11      />
12      <Text>Value {value}</Text>
13    </Flex>
14  );
15})

Thumb Size

Different thumb sizes for various use cases and visual preferences.

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

Accessibility

  • Follows the WAI-ARIA Slider pattern
  • Supports keyboard control with arrow keys, Home, and End
  • Uses aria-valuemin, aria-valuemax, and aria-valuenow attributes
  • Value changes are announced to screen readers