---
title: Range slider (Vanilla) - 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.

## Example

```html
<form class="max-w-xs">
  <label for="usa-range">Range slider</label>
  <input
    id="usa-range"
    class="appearance-none bg-transparent border-none w-full h-10 p-2 pl-px mt-2 focus:outline-4 focus:outline-blue-40v track:appearance-none track:cursor-pointer track:h-4 track:bg-gray-5 track:rounded-full track:w-full track:border track:border-solid track:border-gray-50 thumb:appearance-none thumb:bg-gray-5 thumb:h-5 thumb:w-5 thumb:-mt-[calc(0.125rem+1px)] thumb:rounded-full thumb:ring-2 thumb:ring-gray-50 thumb:focus:bg-white thumb:focus:ring-blue-40v"
    type="range"
    min="0"
    max="100"
    step="1"
    value="20"
  />
</form>
```