---
id: slider
title: Slider
description: A control element that allows for a range of selections.
---

<ComponentPreview id="Slider" />

## Anatomy

<Anatomy id="slider" />

```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

<Example id="basic" />

### Range

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

<Example id="range" />

### 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.

<Example id="with-marks" />

### 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:

<Example id="min-max" />

### 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`:

<Example id="step" />

### 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.

<Example id="on-event" />

### 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

<Example id="vertical" />

### 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`.

<Example id="center-origin" />

### 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.

<Example id="root-provider" />

### Dragging Indicator

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

<Example id="dragging-indicator" />

### 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.

<Example id="thumb-overlap" />

### 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`.

<Example id="thumb-collision" />

## API Reference

### Props

<ComponentTypes id="slider" />

### Context

<ContextType id="slider" />

## Accessibility

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

### Keyboard Support

<KeyBindingsTable id="slider" />
