Slider | Element extends the capabilities of the standard HTML select element.
shadow
Element Slider is an interactive slider component that allows users to select a value from a range of values in a convenient way. It features a handle that can be moved, making it ideal for those scenarios that require the user to provide numeric input or adjust some setting such as volume.
By default, the selection allows the user to select only one option. Including the Icon element will also display the selected icon next to the option.
Adding the bubble attribute will display a bubble above the slider with a number representing the current value of the slider.
| Description | Defines the maximum value of the slider. |
| Attribute | max |
| Type | number ｜ undefined |
| Default | undefined |
| Description | Defines the minimum value of the slider. |
| Attribute | min |
| Type | number ｜ undefined |
| Default | undefined |
| Description | Defines the interval between each slider value. |
| Attribute | step |
| Type | number ｜ undefined |
| Default | undefined |
| Description | Defines the current value of the slider. |
| Attribute | step |
| Type | number ｜ undefined |
| Default | undefined |
| Name | Description |
|---|
wj:slider-change | Called up when the slider value is changed. |
wj:slider-init | Called after the initial slider load. |
wj:slider-move | Invoked after moving the slider handle. |
No public methods available for this component.
| Name | Description |
|---|
slider | Refers to input inside the element. |
| Name | Description |
|---|
--wj-slider-color | Defines the colour of the slider. |
--wj-slider-thumb-color | Defines the color of the slider handle. |
--wj-slider-thumb-shadow | Defines the box-shadow handles of the slider. |
--wj-slider-thumb-shadow-active | Defines the box-shadow of the slider handle in the active state. |
--wj-slider-track-color | Defines the color of the slider's sliding path. |
--wj-slider-track-height | Defines the height of the slider travel. |
| Name | Description |
|---|
end | The content is placed on the right in the LTR and on the left in the RTL. |
label | The content is placed to the right of the slider path in LTR and to the left in RTL. |
start | The content is placed on the left in the LTR and on the right in the RTL. |