Slider
An input where the user selects a value from within a given range.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Slider />
When to Use
- Select a value from a continuous or stepped numeric range
- Control volume, brightness, or opacity with a drag interaction
- Filter products by price range using a dual-thumb range slider
- Set thresholds, limits, or budgets visually
- Provide an intuitive alternative to numeric text inputs for bounded values
Value: 50
Value: 500 / 1000
Value: 5
Volume: 75%
Range: 25 — 75
Hover over the slider to see the tooltip
0
25
50
75
100
Value: 50
Value: 65%
Keyboard Interactions
| Key | Action |
|---|---|
| ArrowRight | Increase the value by one step |
| ArrowLeft | Decrease the value by one step |
| ArrowUp | Increase the value by one step (vertical orientation) |
| ArrowDown | Decrease the value by one step (vertical orientation) |
| Home | Set the value to the minimum |
| End | Set the value to the maximum |
| Tab | Move focus to the slider thumb or next focusable element |
Mobile (rc.49). The slider now uses unified pointer events (mouse, touch, and stylus pen all fire the same handlers) so dragging the thumb works correctly on touchscreens without any extra configuration.
API Reference
Slider
Styling hooks (data-orientation / data-disabled)
The slider root, track, range, and thumbs expose
data-orientation
(horizontal /
vertical) and
data-disabled, so orientation- and
disabled-specific styling can be targeted from CSS (e.g.
data-[orientation=vertical]:…) without extra classes.