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
Icons
Color
When to use
Use wje-slider when users need to enter values, choose options, or trigger form-related actions.
When not to use
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Accessibility
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
Best Practices
- Keep validation rules and error behavior consistent across the entire form.
- Show loading or disabled states during async operations.
- Split complex forms into smaller sections with immediate feedback.
Attributes and Properties
max
| Description | Returns the maximum value of the slider. |
| Attribute | max |
| Type | number |
| Default | - |
min
| Description | Returns the minimum value of the slider. |
| Attribute | min |
| Type | number |
| Default | - |
step
| Description | Returns the step value of the slider. |
| Attribute | step |
| Type | number |
| Default | - |
value
| Description | Returns the value of the slider. |
| Attribute | value |
| Type | number |
| Default | - |
disabled
| Description | Disables user interaction with the component. |
| Attribute | disabled |
| Type | any |
| Default | - |
bubble
| Description | Controls whether the slider value bubble is shown. |
| Attribute | bubble |
| Type | any |
| Default | - |
Events
| Name | Description |
|---|---|
wje-slider:init | Emitted when the wje-slider:init event is dispatched. |
wje-slider:move | Emitted when the wje-slider:move event is dispatched. |
wje-slider:change | Emitted when the component value changes. |
Methods
getPercentage
| Description | Calculates the percentage of a value within a given range. |
| Signature | (min: number, max: number, value?: number) => number |
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.