Slider
An input where the user selects a value from within a given range.
Default
A basic slider from 0 to 100.
Custom Range
Slider with custom min, max, and step.
Various Positions
Sliders at different fill percentages.
0%
25%
50%
75%
100%
Disabled
A disabled slider that cannot be interacted with.
With Label
Slider paired with a label.
Usage
julia
using Suite
# Basic slider
Slider()
# Custom range and step
Slider(min=0, max=100, step=5, default_value=50)
# Vertical orientation
Slider(orientation="vertical")
# Disabled
Slider(default_value=40, disabled=true)
# With a label
Div(
Label("Volume"),
Slider(min=0, max=100, step=1, default_value=75),
)Keyboard Interactions
| Key | Action |
|---|---|
| ArrowRight / ArrowUp | Increase value by one step |
| ArrowLeft / ArrowDown | Decrease value by one step |
| Shift + Arrow | Increase/decrease by 10x step |
| PageUp | Increase value by 10x step |
| PageDown | Decrease value by 10x step |
| Home | Set to minimum value |
| End | Set to maximum value |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| min | Real | 0 | Minimum value |
| max | Real | 100 | Maximum value |
| step | Real | 1 | Step increment |
| default_value | Real | 0 | Initial value |
| orientation | String | "horizontal" | "horizontal" or "vertical" |
| disabled | Bool | false | Disable the slider |
| class | String | "" | Additional CSS classes |
Accessibility
The Slider follows the WAI-ARIA Slider pattern.
- The thumb has
role="slider"with proper aria-valuenow/min/max - Keyboard navigation for arrow keys, Home, End, PageUp, PageDown
- Pointer capture API for smooth drag interaction
- Disabled state sets tabindex="-1" and aria-disabled="true"