RangeSelector: Blazor range selector component

Examples

Basic

Points holds a RangeSelectorPoint (a Time and a Value) per moment. Bind From and To with @bind-From and @bind-To; Step snaps the window to whole steps (a day here) and is the arrow keys' step.

Requests per day, last six months

Selected: Aug 1 to Sep 1, 2026 (31 days, 1,835,237 requests)

website/Examples/Charts/RangeSelectorBasicExample.razor Source

Bind From and To to fields and give the chart only the data between them: here the candles of a CandlestickChart, filtered on Time. Moving the window redraws the chart as you drag. The same works for a LineChart, filtering its labels and values.

CPU utilisation per hour, api-01 (%)

Rising Falling SMA 6

website/Examples/Charts/RangeSelectorChartExample.razor Source

Playground

Requests per day, last six months

Color

LineOnly

Smooth

DateFormat

FromLabel

ToLabel

Title

ShowTitle

Height

<RangeSelector
               Title="Requests per day, last six months"
               Points="@_days" />

@code {
    private DateTime _from = new(2026, 8, 1);
    private DateTime _to = new(2026, 9, 1);

    // Daily request counts: a weekly rhythm and steady growth.
    private static readonly RangeSelectorPoint[] _days = Enumerable.Range(0, 183)
        .Select(i => new RangeSelectorPoint(new DateTime(2026, 4, 20).AddDays(i),
            Math.Round(42000 + i * 160 + 9000 * Math.Sin(i / 7.0 * 2 * Math.PI) + 4000 * Math.Sin(i / 23.0))))
        .ToArray();
}

API

<RangeSelector>

DaisyBlazor.Charts

Parameters

Color string
= "var(--color-primary)"
CSS colour of the overview and the window.
DateFormat string
= null
.NET format of the handles' dates read by screen readers; null shows the date, and the time when the points have one.
From DateTime
= 01/01/0001 00:00:00
Start of the selected window. The default value (or anything before the first point) selects from the first point.
FromLabel string
= "Start of the selected range"
Accessible name of the start handle.
Height string
= "5rem"
CSS height of the overview.
LineOnly bool
= false
Draw only the line of the overview, without the filled area under it.
Points IReadOnlyList<RangeSelectorPoint>
= []
The series to overview: a value at each time. Points are sorted by time; ones without a finite value are left out.
ShowTitle bool
= true
Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
Smooth bool
= true
Smooth the overview with a monotone curve; false joins the points with straight lines.
Step TimeSpan?
= null
Snap the window to whole steps from the first point (e.g. one hour, one day); the arrow keys move a handle by one step, Shift+arrow by ten, and the window is never shorter than one step. Without a step nothing snaps and the keys step by the smallest gap between points.
Title string
= null
Optional heading above the selector; also its accessible name.
To DateTime
= 01/01/0001 00:00:00
End of the selected window. The default value (or anything after the last point) selects up to the last point.
ToLabel string
= "End of the selected range"
Accessible name of the end handle.
Width string
= "100%"
CSS width of the selector.
Class string
= null
Additional CSS classes merged onto the w-full wrapper.
Style string
= null
Inline styles appended to the wrapper after the width.

Name	Type	Default	Description
Color	string	"var(--color-primary)"	CSS colour of the overview and the window.
DateFormat	string	null	.NET format of the handles' dates read by screen readers; null shows the date, and the time when the points have one.
From	DateTime	01/01/0001 00:00:00	Start of the selected window. The default value (or anything before the first point) selects from the first point.
FromLabel	string	"Start of the selected range"	Accessible name of the start handle.
Height	string	"5rem"	CSS height of the overview.
LineOnly	bool	false	Draw only the line of the overview, without the filled area under it.
Points	IReadOnlyList<RangeSelectorPoint>	[]	The series to overview: a value at each time. Points are sorted by time; ones without a finite value are left out.
ShowTitle	bool	true	Draw Title as a visible heading above the chart (the default); false keeps it only as the chart's accessible name, for a chart inside a card that already has a heading.
Smooth	bool	true	Smooth the overview with a monotone curve; false joins the points with straight lines.
Step	TimeSpan?	null	Snap the window to whole steps from the first point (e.g. one hour, one day); the arrow keys move a handle by one step, Shift+arrow by ten, and the window is never shorter than one step. Without a step nothing snaps and the keys step by the smallest gap between points.
Title	string	null	Optional heading above the selector; also its accessible name.
To	DateTime	01/01/0001 00:00:00	End of the selected window. The default value (or anything after the last point) selects up to the last point.
ToLabel	string	"End of the selected range"	Accessible name of the end handle.
Width	string	"100%"	CSS width of the selector.
Class	string	null	Additional CSS classes merged onto the w-full wrapper.
Style	string	null	Inline styles appended to the wrapper after the width.

Events

FromChanged EventCallback<DateTime>
Raised with the new start when the window is moved or its start handle is dragged or keyed.
ToChanged EventCallback<DateTime>
Raised with the new end when the window is moved or its end handle is dragged or keyed.

Name	Type	Description
FromChanged	EventCallback<DateTime>	Raised with the new start when the window is moved or its start handle is dragged or keyed.
ToChanged	EventCallback<DateTime>	Raised with the new end when the window is moved or its end handle is dragged or keyed.

RangeSelector