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
Ukážka dopĺňa slider o label, aby bolo jasné, ako používateľovi pomenovať význam hodnoty alebo rozsahu.
Icons
Ukážka pridáva k slideru ikony, ktoré pomáhajú vizuálne označiť začiatok a koniec rozsahu.
Color
Ukážka porovnáva farebné varianty slidera a ich čitateľnosť v rôznych významových stavoch.
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
bubble
| Popis | Určuje, či sa pri slidri zobrazí bublina s hodnotou. |
| Atribút | bubble |
| Typ | any |
| Predvolené | - |
disabled
| Popis | Vypína používateľskú interakciu s komponentom. |
| Atribút | disabled |
| Typ | boolean |
| Predvolené | - |
max
| Popis | Nastavuje maximálnu povolenú hodnotu. |
| Atribút | max |
| Typ | number |
| Predvolené | 100 |
min
| Popis | Nastavuje minimálnu povolenú hodnotu. |
| Atribút | min |
| Typ | number |
| Predvolené | 0 |
step
| Popis | Nastavuje číselnú hodnotu používanú vo voľbe step. |
| Atribút | step |
| Typ | number |
| Predvolené | 1 |
value
| Popis | Nastavuje aktuálnu hodnotu komponentu. |
| Atribút | value |
| Typ | number |
| Predvolené | 0 |
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.