Slider primitive

Headless Slider: the behavior, keyboard support and ARIA of the WAI-ARIA Slider pattern, with no styles.

@ndop/primitives/slider
WAI-ARIA: Slider

Import

Primitives ship in the @ndop/primitives package and have no styles. Their state is on data attributes for you to style. The styled Slider is built on this one.

import {
  NdSlider,
  NdSliderRange,
  NdSliderThumb,
  NdSliderTrack,
} from '@ndop/primitives/slider';

Accessibility

Implements the Slider pattern of the WAI-ARIA Authoring Practices.

Keyboard

Keys the component handles.

Key	Action
`ArrowRight`or`ArrowUp`	Increases the focused thumb's value by one step.
`ArrowLeft`or`ArrowDown`	Decreases the focused thumb's value by one step.
`PageUp`	Increases the value by ten steps.
`PageDown`	Decreases the value by ten steps.
`Home`	Sets the value to its minimum: the slider's, or the previous thumb's.
`End`	Sets the value to its maximum: the slider's, or the next thumb's.

Focus

Keys and dragging keep focus on the thumb; pressing the slider's track focuses the thumb it moves.
Leaving a thumb marks its bound field touched.

Right-to-left

Horizontal sliders run from the start side, so the minimum is on the right in right-to-left layouts, and ArrowLeft increases the value while ArrowRight decreases it. Vertical sliders run bottom to top in either direction. Direction comes from the nearest dir attribute, on the slider or an ancestor.

API reference

NdSlider

[ndSlider]from @ndop/primitives/slider

Headless slider: the WAI-ARIA slider pattern, or with several [ndSliderThumb]s, the multi-thumb pattern. The root sets the scale (min, max, step) and handles the pointer; each thumb owns one value and is a form control of its own. Horizontal sliders run from the start side, so they mirror in right-to-left layouts.

NdSlider binding	Type	Default
`[min]` The lowest value.	`number`	`0`
`[max]` The highest value.	`number`	`100`
`[step]` The distance between allowed values, from `min`.	`number`	`1`
`[orientation]` Horizontal (from the start side) or vertical (from the bottom).	`'vertical' \| 'horizontal'`	`'horizontal'`
`[disabled]` Disables every thumb.	`boolean`	`false`

Data attribute	Values
`data-orientation`	—
`data-disabled`	—

NdSliderRange

[ndSliderRange]from @ndop/primitives/slider

The filled part of a NdSlider's track. Its start and end are percentages for the styled layer to position it with; the primitive sets no styles.

Data attribute	Values
`data-orientation`	—

NdSliderThumb

[ndSliderThumb]role sliderfrom @ndop/primitives/slider

One thumb of a NdSlider: a role="slider" element that owns one value. It's a ControlValueAccessor for a number, which Signal Forms ([formField]), reactive and template-driven forms bind (ADR-0004, amendments 1 and 4). Name it with aria-label or aria-labelledby.

Manages aria-valuenow, aria-valuemin, aria-valuemax, aria-valuetext, aria-orientation, aria-disabled, aria-invalid.

NdSliderThumb binding	Type	Default
`[defaultValue]` Initial `value` when it isn't bound.	`number \| undefined`	`undefined`
`[valueText]` Text for `aria-valuetext`, when the number alone doesn't say it.	`string \| undefined`	`—`
`[invalid]` Marks the thumb invalid when no forms library is bound; with one, the field's state decides.	`boolean`	`false`
`[(value)]` This thumb's value. Two-way bindable with `[(value)]`.	`number`	`0`

Data attribute	Values
`data-orientation`	—
`data-disabled`	—
`data-invalid`	—

NdSliderTrack

[ndSliderTrack]from @ndop/primitives/slider

The track of a NdSlider: presentational, with the slider's data attributes for styling.

Data attribute	Values
`data-orientation`	—
`data-disabled`	—