i

Slider

Choosing · researched

A track with a draggable handle for picking a number or a range of numbers.

atom · also called Range slider

Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.

Ant Design

Slider native: no antd 6.6.5
Variants
—
Sizes
—
States documented
default, disabled
Accessibility guidance
no

Handle is a div with role=slider (rc-slider), not input type=range. Disabled can be set per handle; orientation prop horizontal/vertical.

docs ↗ · code ↗

Carbon

Slider native: partly @carbon/react 1.117.0
Variants
Default slider, Range slider
Sizes
—
States documented
default, hover, focus, active, disabled, error
Accessibility guidance
yes

Handle is a div with role=slider; a companion native number input is rendered unless hidden. Docs also list warning, read-only and skeleton states.

1 corrected on re-read
  • urls: {"docs_url":"https://carbondesignsystem.com/components/slider/usage/","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slider"} → {"docs_url":"https://www.carbondesignsystem.com/building-blocks/core/components/slider/guidelines","code_url":"https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slider"} curl -L: HTTP 200 for both; docs_url redirects to this final URL

docs ↗ · code ↗

GOV.UK

absentGOV.UK does not ship this component. Nothing is drawn in its place.

Checked the Components index (https://design-system.service.gov.uk/components/), the Patterns index (https://design-system.service.gov.uk/patterns/), the Styles index (https://design-system.service.gov.uk/styles/) and the repo components directory (alphagov/govuk-frontend packages/govuk-frontend/src/govuk/components, plus installed 6.5.1 dist). No slider, range or range-input component, and no pattern for one.

Material Web

Sliders (<md-slider>) native: yes @material/web 2.5.0
Variants
Continuous, Discrete, Range
Sizes
—
States documented
disabled
Accessibility guidance
no

Renders a native input type=range inside the shadow root (two for range). The page has no accessibility section (a TODO comment marks it); disabled appears only in the API table.

docs ↗ · code ↗

Primer

absentPrimer does not ship this component. Nothing is drawn in its place.

No slider/range component in the Product UI component index (primer.style/product/components/, 125 links), the Internal Components list, or the packages/react/src directory tree (including deprecated/, experimental/, internal/).

Spectrum

Slider native: yes @spectrum-web-components/button 1.12.4
Variants
—
Sizes
S, M, L, XL
States documented
default, hover, focus, active, disabled
Accessibility guidance
yes

Docs, sizes and states from the React Spectrum (rsp) page and its Slider.json; trackStyle (thin, thick), thumbStyle (default, precise) and isEmphasized are options, not named variants. Native check: React Aria useSliderThumb renders input type=range (S2 source) and SWC 1st-gen sp-slider HandleController also renders input type=range; no spectrum.adobe.com swc page exists. Accessibility section is the Button keyboard table reused verbatim, not specific to this component.

docs ↗ · code ↗

USWDS

Range slider native: yes @uswds/uswds 3.14.0
Variants
—
Sizes
—
States documented
default, disabled
Accessibility guidance
yes

Template renders input type=range; docs state the component has no variants or settings.

1 corrected on re-read
  • states_documented: ["default"] → ["default","disabled"] Page shows default; Storybook twig has disabled_state and scss styles :disabled

docs ↗ · code ↗

Platform facts

Native elementinput type=rangeSpec: Range state represents a control for setting a number where the exact value is not important. MDN additional attributes: list, max, min, step (defaults min 0, max 100, step 1; default value is midway between min and max). MDN non-standard: orient for vertical. A native range input needs no ARIA; the role slider with aria-valuenow/valuemin/valuemax is only needed for a custom thumb.
Baselinewidely · 2017-03-16
APG patternslider
ARIA roleslider
Shipped by5 of 7 systems

Anatomy

  1. label — APG: if the slider has a visible label it is referenced by aria-labelledby, otherwise aria-label. Native: label element.
  2. slider thumb — APG: the focusable element with role slider; 'sliders typically have a slider thumb that can be moved along a bar, rail, or track'. Focus is placed on the thumb.
  3. rail optional — APG names the bar, rail or track the thumb moves along but does not define it as a required part; no HTML element for it (input type=range draws it).
  4. tick marks optional — MDN: add a list attribute pointing at a datalist whose option elements define the tick marks. Not an APG part.
  5. value text optional — APG: aria-valuetext when aria-valuenow is not user-friendly (e.g. a weekday). Native input keeps the numeric value.

Keys the APG binds

  • Right ArrowIncrease the value of the slider by one step.
  • Up ArrowIncrease the value of the slider by one step.
  • Left ArrowDecrease the value of the slider by one step.
  • Down ArrowDecrease the value of the slider by one step.
  • HomeSet the slider to the first allowed value in its range.
  • EndSet the slider to the last allowed value in its range.
  • Page Up (Optional)Increase the slider value by an amount larger than the step change made by Up Arrow.
  • Page Down (Optional)Decrease the slider value by an amount larger than the step change made by Down Arrow.

The seven states

default Thumb at the current value; default value midway between min and max (MDN).
hover Pointer-only CSS state; not defined by APG or HTML.
focus APG: focus is placed on the slider thumb.
active Thumb held during a drag; CSS :active. Not defined by APG.
disabled disabled attribute on the native input; the APG slider page does not mention a disabled state.
error n/a — MDN: no pattern validation; the value is clamped to min/max and snapped to step, so the only failure is bad input from an unparseable value. No error state is defined.
loading n/a — Not defined by APG or HTML.

Every cell was read twice, the second time from raw sources by a separate pass. 2 of 35 fields changed on the second read — open any “corrected” note to see what it said before.