Slider

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

Usage

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

Slider Props

Prop

Type

Slider.Value Props

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
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        onValueChange={(newValue) => setValue(newValue as number)}

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"