Set of directives to build an accessible slider component with support for multiple thumbs, keyboard navigation, and various customization options.
Features
- Supports multiple thumbs
- Keyboard navigation
- Vertical and horizontal orientations
- Customizable step size
- Minimum distance between thumbs
- Inverted values option
- Accessible WAI-ARIA compliant
Installation
Add and import the module into your imports section.
Module
Standalone directives
Anatomy
Directive's set structure.
Input props
SliderRoot Attribute Directive
The root directive to build a slider. Handles the state and event bindings.
| Input | Default | Type | Description |
|---|---|---|---|
| min | 0 | number | Minimum value the slider can have |
| max | 100 | number | Maximum value the slider can have |
| step | 1 | number | Step increment for value changes |
| orientation | horizontal | "horizontal" | "vertical" | Orientation of the slider |
| disabled | false | boolean | Whether the slider is disabled |
| bigStepFactor | 10 | number | Multiplier for step when using keyboard navigation with shift key |
| name | random-id | string | Name for the hidden input field |
| minStepsBetweenThumbs | 0 | number | Minimum number of steps between multiple thumbs |
| value | [] | number[] | Values for the slider thumbs |
| inverted | false | boolean | Whether the slider values are inverted |
Output events
| Output | Type | Description |
|---|---|---|
| valueChange | EventEmitter<number[]> | Emitted when the slider value changes |
| valueCommit | EventEmitter<number[]> | Emitted when the user finishes interacting with the slider |
| Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
| data-disabled | boolean |
SliderTrack Attribute Directive
Defines the track element where the thumb(s) slide.
| Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
| data-disabled | boolean |
SliderRange Attribute Directive
Represents the filled part of the track between the minimum value and the thumb, or between two thumbs.
| Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
| data-disabled | boolean |
SliderThumb Attribute Directive
The draggable thumb to change the slider value. Multiple thumbs are supported.
| Attribute | Value |
|---|---|
| data-orientation | "horizontal" | "vertical" |
| data-disabled | boolean |
| aria-valuemin | Shows minimum value |
| aria-valuemax | Shows maximum value |
| aria-valuenow | Shows current value |
| aria-orientation | Shows orientation |
SliderInput Attribute Directive
A hidden input that syncs with the slider value for form submissions.
Examples
Range Slider (Multiple Thumbs)
Vertical Slider
Keyboard Navigation
| Key | Action |
|---|---|
| Arrow Left | Decrease value by step (or by step * bigStepFactor with Shift) |
| Arrow Right | Increase value by step (or by step * bigStepFactor with Shift) |
| Arrow Up | Increase value by step (or by step * bigStepFactor with Shift) |
| Arrow Down | Decrease value by step (or by step * bigStepFactor with Shift) |
| Page Up | Increase value by step * bigStepFactor |
| Page Down | Decrease value by step * bigStepFactor |
| Home | Set value to minimum |
| End | Set value to maximum |
State
SliderStateService allows to control the inputs and get the slider state.
Access directive API with exportAS
We can access the state of the slider using a template variable. All the directives expose themselves with the same name. We have access to the directive's attributes and also the state service.
State API - SliderStateService
Documentation for the slider state service API.
| Name | Default | Type | Description |
|---|---|---|---|
| min | 0 | Signal<number> | Minimum value the slider can have |
| max | 100 | Signal<number> | Maximum value the slider can have |
| step | 1 | Signal<number> | Step increment for value changes |
| orientation | horizontal | Signal<"horizontal" | "vertical"> | Orientation of the slider |
| disabled | false | Signal<boolean> | Whether the slider is disabled |
| bigStepFactor | 10 | Signal<number> | Multiplier for step when using keyboard navigation with shift key |
| name | random-id | Signal<string> | Name for the hidden input field |
| minStepsBetweenThumbs | 0 | Signal<number> | Minimum number of steps between multiple thumbs |
| value | [] | MutableSignal<number[]> | Values for the slider thumbs |
| inverted | false | Signal<boolean> | Whether the slider values are inverted |
| thumbs | [] | MutableSignal<Thumb[]> | Array of thumb elements |
| addThumb | - | (thumb: Thumb) => void | Method to add a thumb to the slider |
Accessibility
The slider is built with accessibility in mind and follows WAI-ARIA patterns:
- Each thumb has the appropriate ARIA attributes (
aria-valuemin,aria-valuemax,aria-valuenow,aria-orientation) - Keyboard navigation supports all standard interactions
- Focus management is handled properly between thumbs
- Screen reader announcements are provided for value changes