👁 Image
Syncfusion.Blazor.RangeNavigator 33.2.13

Syncfusion® Blazor Range Navigator Component

The Syncfusion® Blazor Range Navigator Component enables interactive date/numeric range selection and visualization for filtering data in dashboards and charts. Ideal for financial applications, time-series analysis, and any scenario requiring temporal or value-based range filtering.

Key features

• Interactive Range Selection - Select custom date‑time or numeric ranges using intuitive draggable handles, enabling smooth filtering and zooming of large datasets. Seamless Chart Integration - Connects effortlessly with Syncfusion Blazor Charts, allowing the selected range to dynamically filter and update chart data.
• Multiple Axis Types - Supports date‑time, numeric, and logarithmic axes to accommodate a wide variety of data visualization scenarios.
• Built‑In Period Selector - Choose from predefined intervals such as 1M, 3M, YTD, 1Y, and more for quick navigation and fast data exploration.
• Snapping, Ticks & Labels - Offers snapping behavior, customizable ticks, and axis labels for precise and user‑friendly range adjustments.
• Customizable Appearance - Style selected and unselected regions, adjust axis lines, modify label formats, and tailor the visual design to match your application theme.
• Tooltip Support - Displays contextual tooltips showing exact range values for clearer insights and improved usability.
• Globalization & Localization - Automatically adapts date and numeric formats based on culture settings and supports right‑to‑left (RTL) rendering.
• High Performance - Optimized to efficiently handle large datasets while maintaining smooth interactions and fast rendering.
• Responsive Design - Automatically adjusts layout and behavior to fit various screen sizes, offering a consistent experience across desktop and mobile.
• Accessibility Support - Includes keyboard navigation and screen‑reader support to meet accessibility standards.
• Blazor Server & WebAssembly Support - Works seamlessly across both Blazor Server and Blazor WebAssembly applications.

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

1. Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

2. Add the Blazor Range Navigator component to your Razor page.

@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 }
 };
}

Documentation

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• API Reference
• Live Demos

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a 30-day free trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

| Toll Free: 1-888-9-DOTNET