Slider

Anatomy

Import and assemble the component:

1import { Slider } from '@raystack/apsara'
2
3<Slider>
4  <Slider.Label />
5  <Slider.Value />
6</Slider>

Usage

A slider picks a value, or a range. Appearance is two props; the value is yours to own when you need it.

Variant

single (the default) gives one thumb and a value. range gives two thumbs and a [min, max] tuple.

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

Label

Slider.Label renders visible text above the track and names the slider group for screen readers. Put it inside Slider. Slider.Value shows the current value on the same row.

Slider.Label does not name the thumbs. Pass thumbLabel to give each thumb its own name.

1<Slider defaultValue={40} style={{ width: "400px" }}>
2  <Slider.Label>Volume</Slider.Label>
3  <Slider.Value />
4</Slider>

Thumb label

thumbLabel shows text above each thumb and sets the thumb's aria-label. Pass a string for one thumb, or a [string, string] tuple for a range. Without thumbLabel, thumbs are named "Slider thumb", or "Thumb 1" and "Thumb 2" in a range.

thumbLabelDisplay sets when the text is shown:

• always: the text is always shown. This is the default.
• hover: the text is shown while a thumb is hovered, focused, or dragged. Use it with Slider.Label, because the text above a thumb covers the label row.
• none: the text is not shown. thumbLabel still names the thumbs for screen readers.

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    thumbLabel="Large Thumb"
5    defaultValue={50}
6    thumbSize="large"
7  />
8  <Slider
9    variant="single"
10    thumbLabel="Small Thumb"
11    defaultValue={50}
12    thumbSize="small"
13  />
14</Flex>

Controlled

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        thumbLabel="Value"
10        onValueChange={(newValue) => setValue(newValue as number)}
11      />
12      <Text>Value {value}</Text>
13    </Flex>
14  );

API Reference

The slider, its label, and its value readout.

Root

Renders the slider track and thumb control.

Label

Renders a <div> that labels the slider and its thumbs.

Value

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

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

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