Slider
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.
Základné použitie
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.
Bubble
Pridaním atribútu bubble sa nad sliderom zobrazí bublina s číslom vyjadrujúcim aktuálnu hodnotu posuvníka.
Label
Icons
Color
Kedy použiť
Použite wje-slider, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.
Kedy nepoužiť
Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.
Prístupnosť
Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.
Odporúčané postupy
- Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
- Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
- Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.
Atribúty a vlastnosti
max
| Popis | Nastavuje maximálnu povolenú hodnotu. |
| Atribút | max |
| Typ | number |
| Predvolené | - |
min
| Popis | Nastavuje minimálnu povolenú hodnotu. |
| Atribút | min |
| Typ | number |
| Predvolené | - |
step
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe step. |
| Atribút | step |
| Typ | number |
| Predvolené | - |
value
| Popis | Nastavuje aktuálnu hodnotu komponentu. |
| Atribút | value |
| Typ | number |
| Predvolené | - |
disabled
| Popis | Vypína používateľskú interakciu s komponentom. |
| Atribút | disabled |
| Typ | any |
| Predvolené | - |
bubble
| Popis | Určuje, či sa pri slidri zobrazí bublina s hodnotou. |
| Atribút | bubble |
| Typ | any |
| Predvolené | - |
Udalosti
| Názov | Popis |
|---|---|
wje-slider:init | Vyvolá sa pri odoslaní udalosti wje-slider:init. |
wje-slider:move | Vyvolá sa pri odoslaní udalosti wje-slider:move. |
wje-slider:change | Vyvolá sa pri zmene hodnoty komponentu. |
Metódy
getPercentage
| Popis | Vráti percentage z aktuálneho stavu komponentu. |
| Signatúra | (min: number, max: number, value?: number) => number |
CSS tieňové časti
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
CSS vlastné premenné
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Sloty
Pre tento komponent nie sú dostupné žiadne sloty.