A range lets the user pick one value from an ordered series by dragging a thumb, with the current value shown as text.
Every example on this page is the real component, not a picture. There is no Figma component: the range was designed in the repo.
A native range input with a label, the current value and tick labels. Drag, click the track or use the arrow keys. Hover is forced with the State control; focus is live (press Tab).
A range lets the user pick one value from an ordered series by dragging a thumb, with the current value shown as text.
Range is a native <input type="range"> with a label, the value as text and optional tick labels. It is stepped over named values by default, but a numeric range between a minimum and a maximum works too. It has no Figma component: it was designed in the repo.
This documentation has three pages. Examples & Guidelines (this page) shows when and how to use a range. Specifications holds the values: tokens, dimensions, states and requirements. Code shows how to add one to a page.
Use a range when the value is a position on an ordered series and a precise number is not the point. Use it to:
For two or three named options use Pill segment control or eco-radio. For on and off use Switch. For an exact number use eco-input.
| The user… | Use |
|---|---|
| picks one value from an ordered series by dragging | Range |
| picks one of two or three named options | Pill segment control or eco-radio |
| turns something on or off | Switch |
| types an exact number | eco-input |
range.css and range.js.divs.data-ticks.for and id. label-sm, text-secondary.body-sm. It comes from data-labels, or the number plus data-unit.border-primary, inside a 24px high hit area.surface-100. A 4px halo shows on hover.text-tertiary. The recommended step gets a *.Stepped over named values, or numeric between a minimum and a maximum.
There is one size, the same on every breakpoint: a 24px hit area, a 2px track and a 16px thumb. The touch size on mobile is smaller than the usual 44px target; raise the input height at xs and sm if design wants it. Dimensions are under Sizes in Specifications.
The range fills its container. The examples use a 480px control. Keep to about 4 to 12 steps in a 480px control, and use fewer tick labels via data-ticks if they collide.
A thin grey track with a black round thumb. There is no dark-mode variant. Token names and values are under Design Tokens in Specifications.
Drag the thumb or click the track and the thumb moves; the value text updates. The input fires the normal input event, so your page listens for it to apply the value.
Hover shows a 4px halo around the thumb. Focus is a 2px ring that shows on keyboard focus only. States are listed under States in Specifications.
A disabled range is not focusable and has a not-allowed cursor. The track, the thumb and the texts use disabled tokens.
All requirements are listed under Accessibility Requirements in Specifications.
The arrow keys, Home, End, PageUp and PageDown are the native keyboard control. Tab shows the focus ring.
The control is the native <input type="range"> with a visible label. The tick labels are aria-hidden; the value is read through aria-valuetext, so a step is announced by its name.