# Slider

URL: https://ark-ui.com/docs/components/slider
LLM: https://ark-ui.com/llms.txt/components/slider

A control element that allows for a range of selections.

---



## Anatomy



```tsx
<Slider.Root>
  <Slider.Label />
  <Slider.ValueText />
  <Slider.Control>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>
    <Slider.Thumb>
      <Slider.HiddenInput />
    </Slider.Thumb>
  </Slider.Control>
  <Slider.MarkerGroup>
    <Slider.Marker />
  </Slider.MarkerGroup>
</Slider.Root>
```

## Examples

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const Basic = () => {
  return (
    <Slider.Root className={styles.Root} defaultValue={[40]}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
      </div>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Range

You can add multiple thumbs to the slider by adding multiple `Slider.Thumb`

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const Range = () => {
  return (
    <Slider.Root defaultValue={[30, 60]} className={styles.Root}>
      <Slider.Label className={styles.Label}>Label</Slider.Label>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
        <Slider.Thumb index={1} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Marks

You can add marks to the slider track by using the `Slider.MarkerGroup` and `Slider.Marker` components.

Position the `Slider.Marker` components relative to the track by providing the `value` prop.

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const WithMarks = () => {
  return (
    <Slider.Root className={styles.Root} defaultValue={[50]}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
      </div>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
      <Slider.MarkerGroup className={styles.MarkerGroup}>
        {[0, 25, 50, 75, 100].map((value) => (
          <Slider.Marker key={value} value={value} className={styles.Marker}>
            {value}
          </Slider.Marker>
        ))}
      </Slider.MarkerGroup>
    </Slider.Root>
  )
}
```

### Min and Max

By default, the minimum is `0` and the maximum is `100`. If that's not what you want, you can easily specify different
bounds by changing the values of the `min` and/or `max` props.

For example, to ask the user for a value between `-10` and `10`, you can use:

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const MinMax = () => {
  return (
    <Slider.Root min={-10} max={10} defaultValue={[5]} className={styles.Root}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
      </div>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Granularity

By default, the granularity, is `1`, meaning that the value is always an integer. You can change the step attribute to
control the granularity.

For example, If you need a value between `5` and `10`, accurate to two decimal places, you should set the value of step
to `0.01`:

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const Step = () => {
  return (
    <Slider.Root step={0.01} min={5} max={10} defaultValue={[7.5]} className={styles.Root}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
      </div>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Change Events

When the slider value changes, the `onValueChange` and `onValueChangeEnd` callbacks are invoked. You can use this to set
up custom behaviors in your app.

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const OnEvent = () => {
  return (
    <Slider.Root
      onValueChange={(details) => console.log('onValueChange', details.value)}
      onValueChangeEnd={(details) => console.log('onValueChangeEnd', details.value)}
      className={styles.Root}
    >
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
      </div>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Orientation

By default, the slider is assumed to be horizontal. To change the orientation to vertical, set the orientation property
in the machine's context to vertical.

In this mode, the slider will use the arrow up and down keys to increment/decrement its value.

> Don't forget to change the styles of the vertical slider by specifying its height

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const Vertical = () => {
  return (
    <Slider.Root orientation="vertical" className={styles.Root}>
      <Slider.Label className={styles.Label}>Label</Slider.Label>
      <Slider.ValueText className={styles.ValueText} />
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Origin

By default, the slider's origin is at the start of the track. To change the origin to the center of the track, set the
`origin` prop to `center`.

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const CenterOrigin = () => {
  return (
    <Slider.Root origin="center" className={styles.Root} defaultValue={[75]}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
      </div>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Root Provider

An alternative way to control the slider is to use the `RootProvider` component and the `useSlider` hook. This way you
can access the state and methods from outside the component.

```tsx
import { Slider, useSlider } from '@ark-ui/react/slider'
import button from 'styles/button.module.css'
import styles from 'styles/slider.module.css'

export const RootProvider = () => {
  const slider = useSlider()

  return (
    <>
      <button className={button.Root} onClick={() => slider.focus()}>
        Focus
      </button>

      <Slider.RootProvider value={slider} className={styles.Root}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
        <Slider.Control className={styles.Control}>
          <Slider.Track className={styles.Track}>
            <Slider.Range className={styles.Range} />
          </Slider.Track>
          <Slider.Thumb index={0} className={styles.Thumb}>
            <Slider.HiddenInput />
          </Slider.Thumb>
        </Slider.Control>
      </Slider.RootProvider>
    </>
  )
}
```

### Dragging Indicator

Use the `Slider.DraggingIndicator` component inside `Slider.Thumb` to show a visual indicator while the thumb is being
dragged.

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const DraggingIndicator = () => {
  return (
    <Slider.Root className={styles.Root} defaultValue={[40]}>
      <Slider.Label className={styles.Label}>Label</Slider.Label>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.DraggingIndicator className={styles.DraggingIndicator} />
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Thumb Overlap

Use the `minStepsBetweenThumbs` prop to prevent range slider thumbs from overlapping. This ensures a minimum gap between
thumbs, which is useful for price range filters and similar use cases.

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const ThumbOverlap = () => {
  return (
    <Slider.Root minStepsBetweenThumbs={5} defaultValue={[25, 60]} className={styles.Root}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
      </div>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
        <Slider.Thumb index={1} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

### Thumb Collision

Use the `thumbCollisionBehavior` prop to control how thumbs behave when they collide during pointer interactions.
Supported values are `push` (default), `swap`, and `none`.

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

export const ThumbCollision = () => {
  return (
    <Slider.Root thumbCollisionBehavior="push" defaultValue={[25, 60]} className={styles.Root}>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <Slider.Label className={styles.Label}>Label</Slider.Label>
        <Slider.ValueText className={styles.ValueText} />
      </div>
      <Slider.Control className={styles.Control}>
        <Slider.Track className={styles.Track}>
          <Slider.Range className={styles.Range} />
        </Slider.Track>
        <Slider.Thumb index={0} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
        <Slider.Thumb index={1} className={styles.Thumb}>
          <Slider.HiddenInput />
        </Slider.Thumb>
      </Slider.Control>
    </Slider.Root>
  )
}
```

## API Reference

### Props

### Root

#### Props

**`aria-label`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The aria-label of each slider thumb. Useful for providing an accessible name to the slider

**`aria-labelledby`**
Type: `string[]`
Required: false
Default Value: `undefined`
Description: The `id` of the elements that labels each slider thumb. Useful for providing an accessible name to the slider

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`defaultValue`**
Type: `number[]`
Required: false
Default Value: `undefined`
Description: The initial value of the slider when rendered.
Use when you don't need to control the value of the slider.

**`disabled`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the slider is disabled

**`form`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The associate form of the underlying input element.

**`getAriaValueText`**
Type: `(details: ValueTextDetails) => string`
Required: false
Default Value: `undefined`
Description: Function that returns a human readable value for the slider thumb

**`id`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The unique identifier of the machine.

**`ids`**
Type: `Partial<{
  root: string
  thumb: (index: number) => string
  hiddenInput: (index: number) => string
  control: string
  track: string
  range: string
  label: string
  valueText: string
  marker: (index: number) => string
}>`
Required: false
Default Value: `undefined`
Description: The ids of the elements in the slider. Useful for composition.

**`invalid`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the slider is invalid

**`largeStep`**
Type: `number`
Required: false
Default Value: `10 * step`
Description: The step value of the slider when the `Shift` key is held, or the
`PageUp`/`PageDown` keys are used.

**`max`**
Type: `number`
Required: false
Default Value: `100`
Description: The maximum value of the slider

**`min`**
Type: `number`
Required: false
Default Value: `0`
Description: The minimum value of the slider

**`minStepsBetweenThumbs`**
Type: `number`
Required: false
Default Value: `0`
Description: The minimum permitted steps between multiple thumbs.

`minStepsBetweenThumbs` * `step` should reflect the gap between the thumbs.

- `step: 1` and `minStepsBetweenThumbs: 10` => gap is `10`
- `step: 10` and `minStepsBetweenThumbs: 2` => gap is `20`

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: The name associated with each slider thumb (when used in a form)

**`onFocusChange`**
Type: `(details: FocusChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function invoked when the slider's focused index changes

**`onValueChange`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function invoked when the value of the slider changes

**`onValueChangeEnd`**
Type: `(details: ValueChangeDetails) => void`
Required: false
Default Value: `undefined`
Description: Function invoked when the slider value change is done

**`orientation`**
Type: `'horizontal' | 'vertical'`
Required: false
Default Value: `"horizontal"`
Description: The orientation of the slider

**`origin`**
Type: `'center' | 'start' | 'end'`
Required: false
Default Value: `"start"`
Description: The origin of the slider range. The track is filled from the origin
to the thumb for single values.
- "start": Useful when the value represents an absolute value
- "center": Useful when the value represents an offset (relative)
- "end": Useful when the value represents an offset from the end

**`readOnly`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Whether the slider is read-only

**`step`**
Type: `number`
Required: false
Default Value: `1`
Description: The step value of the slider

**`thumbAlignment`**
Type: `'center' | 'contain'`
Required: false
Default Value: `"contain"`
Description: The alignment of the slider thumb relative to the track
- `center`: the thumb will extend beyond the bounds of the slider track.
- `contain`: the thumb will be contained within the bounds of the track.

**`thumbCollisionBehavior`**
Type: `'none' | 'push' | 'swap'`
Required: false
Default Value: `"none"`
Description: Controls how thumbs behave when they collide during pointer interactions.
- `none` (default): Thumbs cannot move past each other; excess movement is ignored.
- `push`: Thumbs push each other without restoring their previous positions when dragged back.
- `swap`: Thumbs swap places when dragged past each other.

**`thumbSize`**
Type: `{ width: number; height: number }`
Required: false
Default Value: `undefined`
Description: The slider thumbs dimensions

**`value`**
Type: `number[]`
Required: false
Default Value: `undefined`
Description: The controlled value of the slider

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: root
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the slider
**`data-dragging`**: Present when in the dragging state
**`data-invalid`**: Present when invalid
**`data-focus`**: Present when focused

### Control

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: control
**`data-dragging`**: Present when in the dragging state
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the control
**`data-invalid`**: Present when invalid
**`data-focus`**: Present when focused

### DraggingIndicator

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: dragging-indicator
**`data-orientation`**: The orientation of the draggingindicator
**`data-state`**: "open" | "closed"

### HiddenInput

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Label

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: label
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the label
**`data-invalid`**: Present when invalid
**`data-dragging`**: Present when in the dragging state
**`data-focus`**: Present when focused

### MarkerGroup

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: marker-group
**`data-orientation`**: The orientation of the markergroup

### Marker

#### Props

**`value`**
Type: `number`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: marker
**`data-orientation`**: The orientation of the marker
**`data-value`**: The value of the item
**`data-disabled`**: Present when disabled
**`data-state`**: 

### Range

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: range
**`data-dragging`**: Present when in the dragging state
**`data-focus`**: Present when focused
**`data-invalid`**: Present when invalid
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the range

### RootProvider

#### Props

**`value`**
Type: `UseSliderReturn`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

### Thumb

#### Props

**`index`**
Type: `number`
Required: true
Default Value: `undefined`
Description: undefined

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

**`name`**
Type: `string`
Required: false
Default Value: `undefined`
Description: undefined

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: thumb
**`data-index`**: The index of the item
**`data-name`**: 
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the thumb
**`data-focus`**: Present when focused
**`data-dragging`**: Present when in the dragging state

### Track

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: track
**`data-disabled`**: Present when disabled
**`data-invalid`**: Present when invalid
**`data-dragging`**: Present when in the dragging state
**`data-orientation`**: The orientation of the track
**`data-focus`**: Present when focused

### ValueText

#### Props

**`asChild`**
Type: `boolean`
Required: false
Default Value: `undefined`
Description: Use the provided child element as the default rendered element, combining their props and behavior.

#### Data Attributes

**`data-scope`**: slider
**`data-part`**: value-text
**`data-disabled`**: Present when disabled
**`data-orientation`**: The orientation of the valuetext
**`data-invalid`**: Present when invalid
**`data-focus`**: Present when focused

### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `number[]` | The value of the slider. |
| `dragging` | `boolean` | Whether the slider is being dragged. |
| `focused` | `boolean` | Whether the slider is focused. |
| `setValue` | `(value: number[]) => void` | Function to set the value of the slider. |
| `getThumbValue` | `(index: number) => number` | Returns the value of the thumb at the given index. |
| `setThumbValue` | `(index: number, value: number) => void` | Sets the value of the thumb at the given index. |
| `getValuePercent` | `(value: number) => number` | Returns the percent of the thumb at the given index. |
| `getPercentValue` | `(percent: number) => number` | Returns the value of the thumb at the given percent. |
| `getThumbPercent` | `(index: number) => number` | Returns the percent of the thumb at the given index. |
| `setThumbPercent` | `(index: number, percent: number) => void` | Sets the percent of the thumb at the given index. |
| `getThumbMin` | `(index: number) => number` | Returns the min value of the thumb at the given index. |
| `getThumbMax` | `(index: number) => number` | Returns the max value of the thumb at the given index. |
| `increment` | `(index: number) => void` | Function to increment the value of the slider at the given index. |
| `decrement` | `(index: number) => void` | Function to decrement the value of the slider at the given index. |
| `focus` | `VoidFunction` | Function to focus the slider. This focuses the first thumb. |


## Accessibility

Complies with the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider/).

### Keyboard Support

**`ArrowRight`**
Description: <span>Increments the slider based on defined step</span>

**`ArrowLeft`**
Description: <span>Decrements the slider based on defined step</span>

**`ArrowUp`**
Description: <span>Increases the value by the step amount.</span>

**`ArrowDown`**
Description: <span>Decreases the value by the step amount.</span>

**`PageUp`**
Description: <span>Increases the value by the <code>largeStep</code> amount.</span>

**`PageDown`**
Description: <span>Decreases the value by the <code>largeStep</code> amount.</span>

**`Shift + ArrowUp`**
Description: <span>Increases the value by the <code>largeStep</code> amount.</span>

**`Shift + ArrowDown`**
Description: <span>Decreases the value by the <code>largeStep</code> amount.</span>

**`Home`**
Description: Sets the value to its minimum.

**`End`**
Description: Sets the value to its maximum.