Slider
An input where the user selects a value from within a given range.
Features
- Can be controlled or uncontrolled.
- Supports multiple thumbs.
- Supports a minimum value between thumbs.
- Supports touch or click on track to update value.
- Supports Right to Left direction.
- Full keyboard navigation.
Anatomy
API Reference
Root
RdxSliderRootComponent
Prop | Default | Type |
---|---|---|
min | 0 | InputSignalWithTransform<number, NumberInput> The minimum value for the range. |
max | 100 | InputSignalWithTransform<number, NumberInput> The maximum value for the range. |
step | 1 | InputSignalWithTransform<number, NumberInput> The stepping interval. |
minStepsBetweenThumbs | 0 | InputSignalWithTransform<number, NumberInput> The minimum permitted steps between multiple thumbs. |
orientation | 'horizontal' | InputSignal<"horizontal" | "vertical"> The orientation of the slider. |
disabled | false | InputSignalWithTransform<boolean, BooleanInput> When true, prevents the user from interacting with the slider. |
inverted | false | InputSignalWithTransform<boolean, BooleanInput> Whether the slider is visually inverted. |
dir | 'ltr' | InputSignal<"ltr" | "rtl"> The reading direction of the combobox when applicable. |
styleClass | — | InputSignal<undefined | string> Style class of the component. |
modelValue | — | ModelSignal<number[]> The controlled value of the slider. |
Emit | Payload |
---|---|
valueChange |
[value: number[]]
Event handler called when the slider value changes. |
valueCommit |
[value: number[]]
Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service. |
Data Attribute | Value |
---|---|
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Track
RdxSliderTrackComponent
The track that contains the SliderRange
.
Data Attribute | Value |
---|---|
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Range
RdxSliderRangeComponent
The range part. Must live inside SliderTrack
.
Data Attribute | Value |
---|---|
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Thumb
RdxSliderThumbComponent
A draggable thumb. You can render multiple thumbs.
Data Attribute | Value |
---|---|
[data-disabled] | Present when disabled |
[data-orientation] | "vertical" | "horizontal" |
Accessibility
Adheres to the Slider WAI-ARIA design pattern .
Keyboard Interactions
Key | Description |
---|---|
Home | Sets the value to its minimum. |
End | Sets the value to its maximum. |
PageDown | Decreases the value by a larger step. |
PageUP | Increases the value by a larger step. |
ArrowDown | Decreases the value by the step amount. |
ArrowRight | Increments/decrements by the step value depending on orientation. |
ArrowUp | Increases the value by the step amount. |
ArrowLeft | Increments/decrements by the step value depending on orientation. |
Shift + ArrowUp | Increases the value by a larger step. |
Shift + ArrowDown | Decreases the value by a larger step. |