Slider
Slider
An input where the user selects a value from within a given range.
Basic
A simple slider with default settings.
Value: 50
Custom Range
Set custom minimum and maximum values.
Value: 100 (0–200)
Step Increment
Control the granularity with the step property.
Value: 50 (increments of 5)
Disabled
A disabled slider cannot be interacted with.
Value: 50 (disabled)
Usage Examples
Common use cases for sliders.
Volume Control
75%
Price Filter
Maximum price: $500
Quality Setting
Medium Quality
Brightness
80%
Accessibility
The Slider uses the native HTML range input which provides built-in keyboard navigation (arrow keys) and screen reader support.
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | @bind-Value / double | 0 | Current slider value. |
| Min | double | 0 | Minimum value. |
| Max | double | 100 | Maximum value. |
| Step | double | 1 | Step increment. |
| Disabled | bool | false | Disables the slider. |
| Class | string? | — | Additional CSS classes. |