---
title: Range slider (React) - USWDS + Tailwind
description: Let people choose an approximate numeric value within a range using
  a range slider.
---

# Range slider

Let people choose an approximate numeric value within a range using a range slider.

## Examples

```tsx
import { RangeSlider } from '@uswds-tailwind/react'

export default function RangeSliderDemo() {
  return (
    <form className="max-w-xs">
      <label htmlFor="range-value" className="block">Range slider</label>
      <RangeSlider.Root name="range">
        <RangeSlider.Input id="range-value" min={0} max={100} step={1} defaultValue={20} />
      </RangeSlider.Root>
    </form>
  )
}
```

## Component API

Use a Root and Input for a styled native range control.

### Root `<div>`

Provides disabled state. For validation state, wrap the slider in Field.Root with invalid.

| Prop | Type | Description |
| - | - | - |
| `disabled` | `boolean` | Disables the slider. |
| `name` | `string` | Form field name. |

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |

### Input `<input>`

Native range input; set min, max, step, and value here.

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |
| `data-invalid` | `Present when invalid` | Style the error state. |