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

Slots

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

SlotElement
sliderThe root container
slider-controlThe interactive control area
slider-trackThe track
slider-indicatorThe filled portion of the track
slider-thumbEach thumb (two in range mode)
slider-thumb-gripThe thumb's visual grip (small or large)
slider-thumb-grip-lineEach grip line (large thumb only)
slider-labelThe thumb label (when label)
slider-valueThe Slider.Value output element

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