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.

How to add a range to a page. The files are components/css/range.css and components/js/range.js.

Basic Usage

Link the shared files once per page. Never copy the rules into a page, and never build a slider from divs.

Step	What to do
1. Link	`<link rel="stylesheet" href="/components/css/range.css">` and `<script src="/components/js/range.js"></script>` (from docs pages: `../../components/js/range.js`).
2. Markup	A `div.form-range[data-range]` with a head (label and `output`), the `input.form-range__input` and, for tick labels, an empty `div.form-range__ticks`.
3. Values	Named steps: `data-labels` and `data-ticks`. Numeric: `data-unit`.
4. React	Listen for the `input` event on the input.

Attribute on `[data-range]`	Meaning
`data-labels="A\|B\|C"`	Value text per step. Also `aria-valuetext`.
`data-ticks="a\|b\|c"`	Tick labels, one per step. Defaults to `data-labels`.
`data-recommended="1"`	Step index of the recommended default. Its tick gets a `*`.
`data-unit="px"`	Suffix for numeric ranges without `data-labels`.

Name	Use
`ECO_RANGE.init(container)`	Wires range blocks added after load.

The CSS alone gives a styled native range; the script adds the value text, the tick labels and the recommended mark.
The input fires the normal input event. The value is the step index for named steps.
.form-range[hidden] { display: none } is in the CSS, so the hidden attribute works.
The track and thumb pseudo-elements are the only place where the browser prefixes (-webkit-, -moz-) are needed.

The component is one CSS file and one script, shared by every page. Link them, never copy them.

CSS (components/css/range.css)

JS (components/js/range.js)