Slider

19th lightest of the twenty-three, by js weight

A native <input type="range">. The keyboard support, the min/max/step arithmetic and the announced role are all the platform's.

Example (a11y tier)

formatValue sets both the visible output and aria-valuetext.

Import

import Slider from 'abaabil/slider'         // structure only

import Slider from 'abaabil/slider/styled'  // + CSS

import Slider from 'abaabil/slider/a11y'    // + label/output/aria-valuetext

Why a range input rather than a div

The common way to build a slider is a <div> with role="slider" and a drag handler, and the common result is a control that cannot be moved with a keyboard at all. Arrow keys, Page Up and Page Down, Home and End, step arithmetic, and the announced value all come free from the native element. This component is 188 bytes at the lower tiers because it does not re-implement any of them.

`formatValue` is usually not optional

A range input announces its raw number, so a price slider says “50” when it means fifty dollars and a duration slider says “90” when it means a minute and a half.formatValue sets aria-valuetext, and also fills the optional visible <output>. The output is marked aria-hidden, because the input already announces its own value and a screen reader would otherwise hear it twice.

Props

Prop	Type	Default	Tier	Description
`min` / `max` / `step`	number	0 / 100 / 1	all	—
`className`	string	—	all	Merged with the base class.
`label`	string	—	a11y	Rendered as a real `<label>`.
`hideLabel`	boolean	false	a11y	—
`description`	string	—	a11y	Wired into `aria-describedby`.
`showValue`	boolean	false	a11y	Renders the value in an `<output>`.
`formatValue`	(value) => string	—	a11y	Sets `aria-valuetext` and the visible output.
...props	—	—	all	Everything else lands on the `<input>`.

Uncontrolled by default: pass defaultValue and read onChange. An uncontrolled slider starts at the midpoint, matching the native thumb, and an out-of-range value is clamped so the printed number can never disagree with where the thumb actually is.