shadow
Element Slider je interaktívny komponent posuvníka, ktorý umožňuje používateľom praktickým spôsobom vybrať hodnotu z rozsahu hodnôt. Ponúka handle (rukoväť), ktorou možno pohybovať, takže je ideálny pri tých scenároch, ktoré od používateľa vyžadujú číselný vstup alebo úpravu nejakého nastavenia, napríklad hlasitosti.
V predvolenom nastavení výber umožňuje používateľovi vybrať len jednu možnosť. Zahrnutím elementu Icon sa pri možnosti zobrazí aj zvolená ikona.
Pridaním atribútu bubble sa nad sliderom zobrazí bublina s číslom vyjadrujúcim aktuálnu hodnotu posuvníka.
;
| 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. |