Slider
Allows users to select a value from a continuous range by sliding a handle.
Structure
Examples
Multiple Thumbs and Ticks
If the value
prop has more than one value, the slider will render multiple thumbs. You can also use the ticks
slot prop to render ticks at specific intervals.
Vertical Orientation
You can use the orientation
prop to change the orientation of the slider, which defaults to "horizontal"
.
RTL Support
You can use the dir
prop to change the reading direction of the slider, which defaults to "ltr"
.
API Reference
The root slider component which contains the remaining slider components.
Property | Type | Description |
---|---|---|
value bindable prop | number[] | The current value of the slider. Default: [] |
onValueChange | function | A callback function called when the value state of the slider changes. Default: undefined |
onValueChangeEnd | function | A callback function called when the user finishes dragging the thumb and the value changes. This is different than the Default: undefined |
disabled | boolean | Whether or not the switch is disabled. Default: false |
max | number | The maximum value of the slider. Default: 100 |
min | number | The minimum value of the slider. Default: 0 |
orientation | enum | The orientation of the slider. Default: "horizontal" |
step | number | The step value of the slider. Default: 1 |
dir | enum | The reading direction of the app. Default: ltr |
autoSort | boolean | Whether to automatically sort the values in the array when moving thumbs past one another. Default: true |
ref bindable prop | HTMLSpanElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
child | Snippet | Use render delegation to render your own element. See delegation docs for more information. Default: undefined |
Data Attribute | Value | Description |
---|---|---|
data-orientation | enum | The orientation of the slider. |
data-slider-root | '' | Present on the root element. |
The range of the slider.
Property | Type | Description |
---|---|---|
ref bindable prop | HTMLSpanElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
child | Snippet | Use render delegation to render your own element. See delegation docs for more information. Default: undefined |
Data Attribute | Value | Description |
---|---|---|
data-slider-range | '' | Present on the range elements. |
A thumb on the slider.
Property | Type | Description |
---|---|---|
index Required | number | The index of the thumb in the array of thumbs provided by the Default: undefined |
disabled | boolean | Whether or not the thumb is disabled. Default: false |
ref bindable prop | HTMLSpanElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
child | Snippet | Use render delegation to render your own element. See delegation docs for more information. Default: undefined |
Data Attribute | Value | Description |
---|---|---|
data-slider-thumb | '' | Present on the thumb elements. |
A tick mark on the slider.
Property | Type | Description |
---|---|---|
index Required | number | The index of the tick in the array of ticks provided by the Default: undefined |
ref bindable prop | HTMLSpanElement | The underlying DOM element being rendered. You can bind to this to get a reference to the element. Default: undefined |
children | Snippet | The children content to render. Default: undefined |
child | Snippet | Use render delegation to render your own element. See delegation docs for more information. Default: undefined |
Data Attribute | Value | Description |
---|---|---|
data-bounded | '' | Present when the tick is bounded. |
data-slider-tick | '' | Present on the tick elements. |