As a user, I want to be able to select a value in a defined range of continuous numbers using a slider, so that the number selection happens with emphasis on its relation to the given minimum and maximum.
For the selection of a small range of discrete values, the OnyxStepper or OnyxSelect should be preferred.
Design
Part of #2043
Acceptance criteria
[ ] It's possible to select a number by clicking an arbitrary position on the track of the slider.
[ ] It's possible to select a number by dragging the thumb across
[ ] dragging should not stop even when the cursor moves outside the component
[ ] When the slider is focused, the value can be changed using the arrow and special keys as described by the aria pattern
[ ] It's possible to type a multi-digit decimal number while the slider is focused and after a "debounce", the closest allowed value is selected.
[ ] The stepSize configuration allows for decimal numbers
Implementation details
Native Range input doesn't allow multiple thumbs, therefore we implement it from scratch, even for a single thumb. So we can share the styling and code without having two implementation patterns.
export type OnyxSliderProps<TType extends "range" | "single"> = {
modelValue?: TType extends "single" ? number : [ number, number ]; // Using a tuple for range slider
range: TType extends "single" ? true : false;
label: string;
}
Open Questions/To-dos
Depends on
2043
Why?
As a user, I want to be able to select a value in a defined range of continuous numbers using a slider, so that the number selection happens with emphasis on its relation to the given minimum and maximum.
For the selection of a small range of discrete values, the
OnyxStepperorOnyxSelectshould be preferred.Design
Acceptance criteria
Implementation details
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role
Reference implementations
Applicable ARIA Pattern
Definition of Done
apps/demo-app/src/views/HomeView.vueApproval