Slider
An input where the user selects a value from within a given range
Interactive-mode
Divergence from Blok
Single-thumb only — no range/multi-thumb support. Blok's Radix-based Slider accepts value/defaultValue as an array of numbers, rendering one thumb per array entry for range selection. Ours takes a single double Value with two-way binding. If you need a range, compose two sliders side-by-side with coordinated min/max. No vertical orientation either — Blok supports it via Radix.
Examples
Default
Value: 50
With Value Display
Custom Range
Temperature: 22.0°C
Disabled
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| Slider | Single-thumb range input. Pairs a decorative track/range/thumb with a transparent native <input type="range"> for input handling. Use @bind-Value for two-way binding. |
Slider
Single-thumb range input. Pairs a decorative track/range/thumb with a transparent native <input type="range"> for input handling. Use @bind-Value for two-way binding.
| Property | Type | Required | Description |
|---|---|---|---|
| Value | double | Current value. Default: 0. Use with ValueChanged or @bind-Value for two-way binding. | |
| ValueChanged | EventCallback<double> | Invoked whenever the thumb moves, with the new value. | |
| Min | double | Minimum selectable value. Default: 0. | |
| Max | double | Maximum selectable value. Default: 100. | |
| Step | double | Increment between selectable values. Default: 1. | |
| Disabled | bool | When true, the slider is non-interactive and visually muted. Default: false. | |
| ClassName | string? | Extra CSS classes appended to the slider's outer container. | |
| AdditionalAttributes | Dictionary<string, object>? | Captured unmatched attributes, forwarded to the underlying <input type="range">. |