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
| Property | Type | Default | Description |
|---|---|---|---|
| Value | double | 0 | Current value of the slider. Use with @bind-Value for two-way binding. |
| ValueChanged | EventCallback<double> | — | Callback invoked when the value changes. |
| Min | double | 0 | Minimum value of the range. |
| Max | double | 100 | Maximum value of the range. |
| Step | double | 1 | Increment step size between values. |
| Disabled | bool | false | When true, prevents user interaction and dims the slider. |
| IsRange | bool | false | Enables dual-thumb range mode. |
| ValueEnd | double | 75 | End value for range slider. Use with @bind-ValueEnd for two-way binding. |
| ValueEndChanged | EventCallback<double> | — | Callback when end value changes. |
| Orientation | string | "Horizontal" | Orientation of the slider: "Horizontal" or "Vertical". |
| ShowTooltip | bool | false | Shows a tooltip with the current value on hover. |
| Marks | List<double>? | null | Custom mark positions to display along the slider track. |
| ShowTicks | bool | false | Shows tick marks at each mark position. |
| FormatTooltip | Func<double, string>? | null | Custom formatter for tooltip and mark labels. |
| Culture | CultureInfo? | null | Culture used for formatting tick labels and tooltips. |
| Required | bool | false | Marks the field as required. Syncs with a parent FormField. |
| Invalid | bool | false | Applies error styling. Syncs with a parent FormField. |
| ErrorText | string? | null | Error message displayed below the field when Invalid is true. |
| HelperText | string? | null | Helper text shown below the field when not invalid. |
| Label | string? | null | Label rendered above the field (standalone, without FormField). |
| Name | string? | null | HTML name attribute for form submission. |
| FormField | FormField.FormFieldContext? | null | Cascaded context from a parent FormField; wires label, validation, and required state automatically. |
| AriaLabel | string? | null | Accessible label announced by screen readers when no visible Label is set. |