RangeSlider
FreeSlider with two thumbs for choosing a lower and an upper value. Both thumbs are native range inputs, so the arrow keys work.
Example
Parameters
| Parameter | Type | Description |
|---|---|---|
Class | string | Extra CSS classes added to the root element. |
Disabled | bool | Disables interaction. |
High | Double | Upper value. Use with @bind-High. |
Label | string | Visible label text (charts: accessible name; IconButton: accessible name and tooltip). |
Low | Double | Lower value. Use with @bind-Low. |
MarkStep | Double? | Distance between marks; defaults to a fifth of the range. |
Max | Double | Largest allowed value (ProgressBar: the value that means 100%; Rating: number of stars). |
Min | Double | Smallest allowed value. |
ShowMarks | bool | Draws tick marks with numbers under the track. |
ShowValue | bool | Shows the current value next to the slider. |
Step | Double | Amount added or removed by the buttons and arrow keys. |
Style | string | Inline style added to the root element. |
Events
| Event | Type | Description |
|---|---|---|
HighChanged | EventCallback<Double> | Raised when the upper value changes. |
LowChanged | EventCallback<Double> | Raised when the lower value changes. |
Package
RangeSlider is part of RayCraft Free. Package: RayCraft.Blazor. It comes from nuget.org. See Getting started.
Send feedbackVersion 1.0.3