# Range

Two fader caps in one slot, for a span between a low value and a high one: a price band, quiet hours, a frequency band. The span between the caps is printed on the slot’s floor and both values read on a small LCD. The caps meet but never pass each other. Underneath are two native range inputs, which post with the form and are what shows without the script.

Kit part · With the Kit · https://tactileui.dev/parts/range

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

Pointer capture keeps a drag on its cap when the pointer leaves the slot, and a press on the slot brings whichever cap is nearer. The one touched last sits on top, so two caps that meet can both still be caught.

## Variants

- Quiet hours · a unit after
- Held apart · gap
- No script: two faders

## States

- Rest
- Hover
- Held
- Focus

## Props and options

| Name | Kind | Description |
| - | - | - |
| unit · unit-place | attribute | The unit printed and spoken with each value. |
| labels | attribute | Two comma separated names for the caps, used when a native input has no label span or aria-label of its own. Default “Lowest” and “Highest”. |
| gap | attribute | The least the two values may be apart. The caps stop that far from each other. |
| min · max · step · value | attribute | The scale, read from the first input. Both inputs share it. |
| input · change | event | As ever, on the native input whose cap moved: input while it moves, change when it is let go or a key is pressed. |
| Arrows · Page Up · Page Down · Home · End | keyboard | A step, a tenth of the scale, and as far as the cap can go: the end of the scale, or the other cap. |
| rangeSnap · rangeSet · rangeKey · rangeText · rangeHTML | function | The rules, pure: a value on the scale, a cap that cannot cross, what a key does, a value with its unit, and the built markup. |

## Usage notes

Drag either cap, or press the slot to bring the nearer cap there. Tab to a cap and use the arrows for a step, Page Up and Page Down for a tenth, Home and End for as far as it can go. The caps stop at each other.

## Accessibility

- The LCD readout repeats what the caps already say and is hidden from assistive technology.
- Without the script the two native ranges are there, labelled and in a fieldset, and post the same values.
- The slot lets the page scroll up and down under a thumb and takes only sideways drags.
- Nothing animates, so reduced motion changes nothing: the caps go where they are sent.

## Related parts

- [Fader](https://tactileui.dev/parts/fader): A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.
- [Scrub field](https://tactileui.dev/parts/scrub): A number you can type or drag, the way a pro tool’s value field works: an engraved ruler under the numerals slides beneath a fixed index as the value moves.
- [Knob](https://tactileui.dev/parts/knob): A rotary control for continuous or stepped values where space is square. Its knurl and pointer turn; its light does not.