Slider
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.
Basic usage
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.
Bubble
Adding the bubble attribute will display a bubble above the slider with a number representing the current value of the slider.
Label
The sample adds a label to the slider to make it clear to the user the meaning of the value or range.
Icons
The preview adds icons to the slider to help visually mark the beginning and end of the range.
Color
The demonstration compares the colour variants of the slider and their legibility in different meaning states.
When to use
Use wje-slider when the user enters a value, selects options, or performs an action on a form.
When not to use
Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.
Accessibility
Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.
Recommended practices
- Keep validation rules and error states consistent across the entire form.
- For asynchronous operations, display the load status or disabled status.
- For complex forms, prefer smaller sections and immediate feedback.
Attributes and properties
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 |
Events
| 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. |
Methods
getPercentage
| Popis | Vráti percentage z aktuálneho stavu komponentu. |
| Signatúra | (min: number, max: number, value?: number) => number |
CSS shadow parts
Pre tento komponent nie sú dostupné žiadne CSS časti tieňa.
CSS custom variables
Pre tento komponent nie sú dostupné žiadne vlastné CSS vlastnosti.
Slots
Pre tento komponent nie sú dostupné žiadne sloty.