# Range

> A slider with a styled track and thumb in Chromium, WebKit and Firefox.

Page: https://pico.rusticstack.com/docs/forms/range

`input[type="range"]` is full width with a thin track and a round thumb. The thumb grows slightly while it is dragged.

**Example: Range**

```html
<label>
  Volume
  <input type="range" name="volume" min="0" max="100" value="40" />
</label>
```

## Accessibility

Give the slider a label. For a value that matters, show it in an `output` element linked with `for`, so the number is readable without dragging.

**Example: Range with output**

```html
<form oninput="level.value = volume.value">
  <label for="volume">Volume</label>
  <input type="range" id="volume" name="volume" min="0" max="100" value="40" />
  <output name="level" for="volume">40</output>
</form>
```

## Customization

| Variable | Default | Description |
| --- | --- | --- |
| `--pico-range-border-color` |  | Track color. |
| `--pico-range-active-border-color` |  | Track color while active or focused. |
| `--pico-range-thumb-border-color` | `var(--pico-background-color)` | Thumb border. |
| `--pico-range-thumb-color` | `var(--pico-secondary-background)` | Thumb color. |
| `--pico-range-thumb-active-color` | `var(--pico-primary-background)` | Thumb color while active or focused. |

A range input has no border or padding, so it shows no visible validation style.