Slider können sowohl in horizontaler Ausrichtung als auch in vertikaler Ausrichtung dargestellt werden. Slider verfügen optional über eine Wertanzeige, diese kann im gedrückten Zustand (pressed) aktiviert werden und zeigt den aktuellen Wert entsprechend der Handle-Position an.
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
id | string | undefined | Unique ID for the slider |
value | number | undefined | Selected value of slider |
min | number | 0 | Minimum value of slider |
max | number | 100 | Maximum value of slider |
step | number | 1 | The interval the value moves on every step |
disabled | boolean | false | Whether or not the slider is disabled |
labelLeft | string | undefined | Label text at the left sight of the slider |
labelRight | string | undefined | Label text at the right side of the textfield |
hasTooltip | boolean | false | Whether a tooltip with the value is displayed on click of the thumb |
tooltipType | string | undefined | Can be absolute or relative. Relative by default |
tooltipUnit | string | undefined | Unit symbol, displayed with absolute value |
labelsOnTop | boolean | false | if true, labels will be displayed on top instead of to the sides, optional, defaults to false representation of a slider |
isVertical | boolean | false | Whether the slider is vertical or not. Horizontal by default. |
tabIndex | number | 0 | Index of sequential keyboard navigation |
style | string | undefined | Additional css styles |
Weitere dazugehörige Komponenten
RangeSlider
Eigenschaften
| Name | Type | Default Value | Description |
|---|---|---|---|
disabled | boolean | false | Disables the slider |
step | number | 1 | Slider Step |
min | number | 0 | The min value of the Range |
max | number | 100 | The max value of the Range |
valueStart | number | min | The selected start value |
valueEnd | number | max | The selected end value |
Beispiele
Default
RangeSlider
Range disabled
Disabled
With Tooltip
Label left
Label Right
Label Left & Right
With absolute Tooltip
Vertical Slider
Do's and Don'ts
Do
Slider im Formular