Overview
The Blazor Range Selector component is an interface for selecting a small range from a larger collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized.
Blazor Range Selector Code Example
Easily get started with the Blazor Range Selector using a few simple lines of C# code as demonstrated below. Also explore our Blazor Range Selector Example that shows you how to render and configure the Range Selector in Blazor.
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Charts
<SfRangeNavigator ValueType="RangeValueType.DateTime" IntervalType="RangeIntervalType.Years" LabelFormat="yyyy">
<RangeNavigatorSeriesCollection>
<RangeNavigatorSeries DataSource="@StockDetails" XName="Date" Type="RangeNavigatorType.Area" YName="Close"></RangeNavigatorSeries>
</RangeNavigatorSeriesCollection>
</SfRangeNavigator>
@code {
public class StockPrice
{
public DateTime Date { get; set; }
public double Close { get; set; }
}
public List<StockPrice> StockDetails = new List<StockPrice>
{
new StockPrice { Date = new DateTime(2005, 01, 01), Close = 21 },
new StockPrice { Date = new DateTime(2006, 01, 01), Close = 24 },
new StockPrice { Date = new DateTime(2007, 01, 01), Close = 36 },
new StockPrice { Date = new DateTime(2008, 01, 01), Close = 38 },
new StockPrice { Date = new DateTime(2009, 01, 01), Close = 54 },
new StockPrice { Date = new DateTime(2010, 01, 01), Close = 57 },
new StockPrice { Date = new DateTime(2011, 01, 01), Close = 62 }
};
}Data types
Plot different types of data in the Blazor Range Selector component using different value types like numeric, date-time, and logarithmic.
Chart Types
Use the Blazor Range Selector component with different chart types like line, area and step line.
Lightweight
Skip the chart and show just the range to select data. This makes a range selector light weight in mobile devices.
Scales
A date-time axis can be configured to show in major and minor scales. The major and minor scales show where a range falls within different intervals and are displayed in multiple levels
Time Period Selector
Select data using predefined time periods in the range navigator and use the date picker to select a custom range.
Binding selected data
Bind selected data from a range selector to any other data visualization control using built-in events.
Deferred scrolling
The selected range doesn’t change until the user stops dragging the thumbs. This provides a smooth scrolling experience.
Range selection
The Blazor Range Selector component provides the following ways to select a range:
- Select a range through labels.
- Drag the left and right thumbs.
- Drag the selected range to maintain the same delta.
Customization
All the elements of the Blazor Range Selector component are highly customizable with built-in APIs.
Labels
Customize the size, color, font family, font attribute, and alignment of the labels using built-in APIs.
Thumbs
Customize the entire appearance of the left and right thumbs using built-in APIs.
Gridlines
Customize the color, stroke width, dash array, and visibility of the major and minor gridlines using built-in APIs.
Tooltip
Tooltips display the start and end values of a selected range to enable users to select a required range easily.
Globalization and localization
Globalization
The Blazor Range Selector component allows users from different locales to format dates, currency, and numbers to suit preferences. The component uses the Essential JS 2 internalization library for handling value formatting.
Right to left {RTL}
The Blazor Range Selector component supports right-to-left rendering, allowing the series and scale direction to be displayed from right to left. This improves the user experience and accessibility for users of RTL languages.
145+ UI components
1200+ interactive Blazor demos
9.7M+ downloads
Other supported frameworks
The Range Selector is available for the React, Angular, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:
Supported browsers
The Blazor Range Selector works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.
