---
title: Slider
slug: slider
section: components
description: .
---

# Slider

<Description>An input where the user selects a value from within a given range.</Description>

<ComponentPreview name="slider" file="slider-demo" />

<FeatureList items={[
    'Can be controlled or uncontrolled.',
    'Supports multiple thumbs.',
    'Supports a minimum value between thumbs.',
    'Supports touch or click on track to update value.',
    'Supports Right to Left direction.',
    'Full keyboard navigation.'
]} />

## Anatomy

```html
<rdx-slider>
    <rdx-slider-track>
        <rdx-slider-range />
    </rdx-slider-track>
    <rdx-slider-thumb />
</rdx-slider>
```

## API Reference

### Root
`RdxSliderRootComponent`


### Track
`RdxSliderTrackComponent`


### Range
`RdxSliderRangeComponent`


### Thumb
`RdxSliderThumbComponent`

## Accessibility
Adheres to the [Slider WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb).

### Keyboard Interactions
