> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/raystack/apsara/llms.txt
> Use this file to discover all available pages before exploring further.

# Slider

> A slider component for selecting numeric values within a range.

The Slider component allows users to select a value or range of values by dragging a thumb along a track. It supports both single value and range selection.

## Basic usage

```jsx theme={null}
import { Slider } from '@raystack/apsara';

function App() {
  return <Slider defaultValue={[50]} min={0} max={100} />;
}
```

## Props

<ParamField path="value" type="number[]">
  The controlled value(s) of the slider.
</ParamField>

<ParamField path="defaultValue" type="number[]">
  The default value(s) for uncontrolled usage.
</ParamField>

<ParamField path="onValueChange" type="(value: number[]) => void">
  Callback fired when the value changes.
</ParamField>

<ParamField path="min" type="number" default="0">
  The minimum value of the slider.
</ParamField>

<ParamField path="max" type="number" default="100">
  The maximum value of the slider.
</ParamField>

<ParamField path="step" type="number" default="1">
  The step increment for value changes.
</ParamField>

<ParamField path="disabled" type="boolean">
  Whether the slider is disabled.
</ParamField>

<ParamField path="variant" type="'single' | 'range'" default="'single'">
  The variant of the slider. Use 'range' for two thumbs.
</ParamField>

<ParamField path="label" type="string | [string, string]">
  Label(s) to display on the thumb(s). Use array for range variant.
</ParamField>

<ParamField path="thumbSize" type="'small' | 'large'" default="'large'">
  The size of the slider thumb.
</ParamField>

<ParamField path="className" type="string">
  Additional CSS classes to apply to the slider.
</ParamField>

## Single value slider

```jsx theme={null}
function SingleSlider() {
  const [value, setValue] = useState([50]);

  return (
    <div>
      <Slider value={value} onValueChange={setValue} min={0} max={100} />
      <p>Value: {value[0]}</p>
    </div>
  );
}
```

## Range slider

```jsx theme={null}
function RangeSlider() {
  const [range, setRange] = useState([25, 75]);

  return (
    <div>
      <Slider
        variant="range"
        value={range}
        onValueChange={setRange}
        min={0}
        max={100}
      />
      <p>Range: {range[0]} - {range[1]}</p>
    </div>
  );
}
```

## With labels

```jsx theme={null}
<Slider
  defaultValue={[50]}
  label="Volume"
  min={0}
  max={100}
/>

<Slider
  variant="range"
  defaultValue={[20, 80]}
  label={['Min', 'Max']}
  min={0}
  max={100}
/>
```

## With step

```jsx theme={null}
<Slider defaultValue={[50]} min={0} max={100} step={10} />
```

## Thumb sizes

```jsx theme={null}
<Slider thumbSize="small" defaultValue={[50]} />
<Slider thumbSize="large" defaultValue={[50]} />
```

## Disabled state

```jsx theme={null}
<Slider defaultValue={[50]} disabled />
```

## Price range example

```jsx theme={null}
function PriceRangeSlider() {
  const [priceRange, setPriceRange] = useState([100, 500]);

  return (
    <div>
      <h4>Price Range</h4>
      <Slider
        variant="range"
        value={priceRange}
        onValueChange={setPriceRange}
        min={0}
        max={1000}
        step={10}
        label={['Min', 'Max']}
      />
      <p>${priceRange[0]} - ${priceRange[1]}</p>
    </div>
  );
}
```

## Volume control example

```jsx theme={null}
function VolumeControl() {
  const [volume, setVolume] = useState([70]);

  return (
    <div>
      <label>Volume: {volume[0]}%</label>
      <Slider
        value={volume}
        onValueChange={setVolume}
        min={0}
        max={100}
        label="Vol"
        thumbSize="small"
      />
    </div>
  );
}
```

## Custom min/max range

```jsx theme={null}
<Slider defaultValue={[2024]} min={2000} max={2030} step={1} />
```

## With value display

```jsx theme={null}
function SliderWithDisplay() {
  const [value, setValue] = useState([42]);

  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span>0</span>
        <strong>{value[0]}</strong>
        <span>100</span>
      </div>
      <Slider value={value} onValueChange={setValue} min={0} max={100} />
    </div>
  );
}
```

## Accessibility

* Built on Base UI Slider primitive with full accessibility support.
* Proper ARIA attributes including `aria-label` are automatically applied.
* Supports keyboard navigation with arrow keys to adjust values.
* The thumb has proper focus states and can be navigated via Tab key.
* Labels are used as `aria-label` for each thumb to identify them to screen readers.
* The slider uses edge alignment for accurate value representation.