# Range

## Overview

The range component is a native slider for choosing a value within a bounded numeric range.

Use a range when the user is choosing an approximate value within a span. Do not use it for precise numeric entry; use a native number input instead.

## When to use

Use a range when users choose an approximate value within a bounded numeric span.

## When not to use

Do not use a range when users must enter a precise number; use a native number input.

## Usage

The wrapping label uses the range input's intrinsic inline size by default. Add `class="fluid"` to the label when the complete field should fill its container.

```html
<label>
  <span data-role="label">Volume</span>
  <input type="range" min="0" max="100" value="50" />
  <span data-role="range-limits" aria-hidden="true">
    <span>0</span>
    <span>100</span>
  </span>
</label>
```

Use `[data-role="range-limits"]` when the minimum and maximum should stay visible below the slider.

## Accessibility

- Use a native `<label>` so the slider keeps an explicit accessible name.
- Keep the min and max in nearby text when they help users understand the scale.
- Do not add JavaScript-only value displays unless the page still works without them.

## Variables

| Variable | Type | Description |
| --- | --- | --- |
| `--range-color-accent-disabled` | `<color>` | Sets --range-color-accent-disabled so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-color-border-inverse` | `<color>` | Sets --range-color-border-inverse so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-color-border-subtle` | `<color>` | Sets --range-color-border-subtle so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-color-focus-ring` | `<color>` | Sets --range-color-focus-ring so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-color-primary` | `<color>` | Sets --range-color-primary so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-color-text-accent` | `<color>` | Sets --range-color-text-accent so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-color-text-subtle` | `<color>` | Sets --range-color-text-subtle so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-control-border-width` | `<length>` | Sets --range-control-border-width so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-control-gap` | `<length>` | Sets --range-control-gap so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-control-min-height` | `<length>` | Sets --range-control-min-height so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-control-radius` | `<length>` | Sets --range-control-radius so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-focus-ring-size` | `<length>` | Sets --range-focus-ring-size so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-font-size` | `<length>` | Sets --range-font-size so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-font-size-caption` | `<length>` | Sets --range-font-size-caption so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-line-height` | `<number>` | Sets --range-line-height so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-space-inline` | `<length>` | Sets --range-space-inline so the component can default to shared theme or layout tokens while exposing an overrideable component API. |
| `--range-thumb-size` | `<length>` | Sets the draggable thumb size for range inputs; change it when the handle needs a larger target or a lighter visual footprint. |
| `--range-track-size` | `<length>` | Sets the track thickness for range inputs; change it with thumb size so the thumb stays visually centered on the rail. |

## Depends On

- `--color-accent-disabled`
- `--color-border-inverse`
- `--color-border-subtle`
- `--color-focus-ring`
- `--color-primary`
- `--color-text-accent`
- `--color-text-subtle`
- `--font-line-height-body`
- `--font-size`
- `--font-size-caption`
- `--layout-control-border-width`
- `--layout-control-gap`
- `--layout-control-min-height`
- `--layout-control-radius`
- `--layout-focus-ring-size`
- `--layout-space-inline`