Components · FormNot verified with Figma

Range

A range lets the user pick one value from an ordered series by dragging a thumb, with the current value shown as text.

Tokens, dimensions, states and requirements. There is no Figma component: values come from the live token package and the specification skill.

Design Tokens

Resolved from the live token package.

State	Part	Token	Value

Open points: no Figma component. The sizes were decided in code. No dark-mode variant.

The same on every breakpoint. The 24px hit area is below the usual 44px touch target; raise the input height at xs and sm if design wants it.

Attribute	Value
Control height	Head row (20px line) + 4px + hit area 24px + 4px + ticks 16px
Hit area	24px, full width of the container
Track	2px high
Thumb	16px circle, centered on the track (7px above the track top)
Halo	4px around the thumb, on hover
Focus ring	2px line, 2px offset, around the input
Corners	Round thumb, square track

A range has no padding of its own, so there is no measurement figure.

The gaps between the parts as spacing tokens.

Part	Value
Gap between head, input and ticks	`space-4`
Gap between label and value	`space-8` minimum
Halo, focus ring offset	4px and 2px: literals

Four states. Enabled and Disabled are shown. Hover and focus come from the browser: hover the thumb for the halo, press Tab for the ring.

State	Control	Look

Part	Type	Size / line height	Letter spacing	Weight
Label	`label-sm`	14/20	0.28px	600
Value	`body-sm`	14/20	0.36px	Regular
Ticks	—	12/16	0.3px	Regular

Breuer Condensed with ss02, ss03 and ss06. The same on every breakpoint.

Element	Class	Notes
Block	`form-range` with `data-range`	Column of head, input and ticks. `[hidden]` hides it.
Head	`form-range__head`	Label on the left, value on the right.
Label	`form-range__label`	A `label` with `for`.
Value	`form-range__value`	An `output`.
Input	`form-range__input`	The native range input.
Ticks	`form-range__ticks`	Optional. Filled by `range.js`.

Type	Attributes	Use
Named steps	`data-labels`, `data-ticks`, optional `data-recommended`	An ordered list of named values.
Numeric	`data-unit`	A number between a minimum and a maximum.

Attribute on `[data-range]`	Meaning
`data-labels="A\|B\|C"`	Value text per step, shown right of the label and set as `aria-valuetext`. Without it the number is shown (plus `data-unit`).
`data-ticks="a\|b\|c"`	Tick labels under the track, one per step. Defaults to `data-labels`. Omit the `.form-range__ticks` div for none.
`data-recommended="1"`	Step index of the recommended default. Its tick gets a ``; explain the near the control.
`data-unit="px"`	Suffix for numeric ranges without `data-labels`.

The range fills its container.

Property	Duration	Easing
`box-shadow` of the thumb (the halo), hover in and out	`duration-fast-2`	`ease-standard`

Input	Result
Drag, click the track	Moves the thumb; the value text updates.
Arrow keys, Home, End, PageUp, PageDown	Native keyboard control.
Tab	Focus ring on keyboard focus only.
Event	The normal `input` event on the `<input>`. For blocks added later: `ECO_RANGE.init(container)`.
Hide	The `hidden` attribute on the `.form-range` block.

Topic	Requirement
Element	Always the native `<input type="range">`, never a `div` imitation. Keyboard and screen readers then work for free.
Label	A visible label linked with `for` and `id`.
Value	Ticks are `aria-hidden`; the value is read through `aria-valuetext`.
Focus	2px ring `border-focus` on `:focus-visible` (WCAG 2.4.7, 1.4.11).
Target size	The 24px hit area meets WCAG 2.5.8 (24px) but not the 44px recommendation.
Disabled	Not focusable. Disabled tokens are exempt from contrast requirements.