Range: Blazor range component

Examples

Binding

@bind-Value updates while dragging, so the read-out follows the thumb.

Alert threshold 65%

website/Examples/DataInput/RangeBasicExample.razor Source

Min, max and step

Negative ranges and fractional steps are fine.

Price adjustment +1.5 %

−80+8

website/Examples/DataInput/RangeStepExample.razor Source

Colors and sizes

Color maps to range-*; Size to range-sm and range-lg.

website/Examples/DataInput/RangeColorsExample.razor Source

Playground

Value

Min

Max

Step

Color Color

Size Size

<Range Value="65" Color="Color.Primary" Style="width:16rem" />

API

<Range>

DaisyBlazor

Parameters

Color Color
= Color.Default
Semantic color applied as range-{token} (e.g. range-primary).
Label string
= null
Accessible name of the slider, emitted as aria-label (not rendered visibly).
Max double
= 100
Maximum allowed value. Defaults to 100.
Min double
= 0
Minimum allowed value. Defaults to 0.
Size Size
= Size.Medium
Size of the slider thumb: Small → range-sm, Medium → range-md, Large → range-lg.
Step double
= 1
Granularity of each step. Defaults to 1.
Value double
= 0
Current value of the range input.
Class string
= null
Extra CSS classes added to the range input.
Style string
= null
Inline CSS style applied to the range input.

Name	Type	Default	Description
Color	Color	Color.Default	Semantic color applied as range-{token} (e.g. range-primary).
Label	string	null	Accessible name of the slider, emitted as aria-label (not rendered visibly).
Max	double	100	Maximum allowed value. Defaults to 100.
Min	double	0	Minimum allowed value. Defaults to 0.
Size	Size	Size.Medium	Size of the slider thumb: Small → range-sm, Medium → range-md, Large → range-lg.
Step	double	1	Granularity of each step. Defaults to 1.
Value	double	0	Current value of the range input.
Class	string	null	Extra CSS classes added to the range input.
Style	string	null	Inline CSS style applied to the range input.

Events

ValueChanged EventCallback<double>
Raised when the user moves the slider.

Name	Type	Description
ValueChanged	EventCallback<double>	Raised when the user moves the slider.

From MudSlider

Range keeps MudSlider's parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.