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 | The current value of the slider. |
| Attribute | value |
| Type | number |
| Default | 0 |
| Description | Minimum slider value. |
| Attribute | min |
| Type | number |
| Default | 0 |
| Description | The maximum value of the slider. |
| Attribute | max |
| Type | number |
| Default | 100 |
| Description | Step value - determines how much the value will change in one shift. |
| Attribute | step |
| Type | number |
| Default | 1 |
| Description | If defined, a bubble with the current value is displayed above the slider. |
| Attribute | bubble |
| Type | boolean |
| Default | false |
| Description | The colour of the slider to be used. The default options are "primary", "success", "warning", "danger", "complete", and "dark". |
| Attribute | color |
| Type | "complete" ｜ "danger" ｜ "dark" ｜ "primary" ｜ "success" ｜ "warning" ｜ string |
| Default | undefined |
| Name | Description |
|---|
wje-slider:init | Called when the slider is initialized. |
wje-slider:move | Called when the slider moves. |
wje-slider:change | Called when the value of the slider changes. |
| Description | Calculates the percentage value within the given range. |
| Signature | getPercentage(min: number, max: number, value?: number) => number |
| Name | Description |
|---|
native | Refers to the main enveloping div element. |
slider | Refers to the input element of the range type. |
| Name | Description |
|---|
--wje-slider-track-height | Slider track height |
--wje-slider-color | Colour of the active part of the slider track |
--wje-slider-thumb-color | Slider button colour |
--wje-slider-thumb-border | The edge of the slider button |
--wje-slider-thumb-shadow | Shadow of the slider button in the basic state |
--wje-slider-thumb-shadow-active | Shadow of the slider button in active state |
--wje-slider-track-color | Colour of the inactive part of the slider track |
| Name | Description |
|---|
label | The contents of the slider nameplate. |
start | The content that appears at the beginning of the slider. |
end | The content that appears at the end of the slider. |