Syncfusion ASP.NET MVC Range Navigator component
The Syncfusion ASP.NET MVC Range Navigator component is used as an interface for selecting a range in a large dataset. It is commonly used as a companion to charts for filtering the visible data range.
Using this package with an AI coding agent
Before generating Syncfusion code, ask your AI coding agent to run the Syncfusion setup using the following prompt:
Set up this project for Syncfusion before generating code. Fetch and follow the official instructions at https://ai.syncfusion.com, then report the detected platform, installed skill pack, MCP status, and any required licensing action.
The setup detects your project's platform and loads the appropriate Syncfusion skill pack. No Syncfusion account or MCP key is required to install or read Syncfusion agent skills.
Platform reference: https://ai.syncfusion.com/aspnet-mvc/llms.txt
Key features
- Interactive range selection: Select date-time or numeric ranges interactively
- Navigator background chart: Displays a mini-chart (area, line, or candlestick) in the navigator background
- Configurable intervals: auto, years, quarters, months, weeks, days, hours, minutes, seconds
- Predefined period selection: Period selector for predefined range buttons (1M, 3M, 6M, 1Y, All)
- Lightweight navigation experience: Provides a Lightweight and scrollable navigator
- Tooltip and label formatting: Supports customizable tooltips and label formatting to improve data readability and presentation
Common setup
These setup steps are required only once for your application, regardless of which Syncfusion components you use.
1. Install NuGet package
Install-Package Syncfusion.AspNetMvc.RangeNavigator
2. Add namespace reference
Edit Web.config under the Views folder and add the Syncfusion.EJ2 namespace:
<namespaces>
<add namespace="Syncfusion.EJ2"/>
</namespaces>
3. Add stylesheet & script references
In your layout file (~/Views/Shared/_Layout.cshtml), add the following in the <head> section:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewBag.Title - Syncfusion Application</title>
<!-- Syncfusion ASP.NET MVC controls styles -->
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/35.1.39/fluent2.css" />
<!-- Syncfusion ASP.NET MVC controls scripts -->
<script src="https://cdn.syncfusion.com/ej2/35.1.39/dist/ej2.min.js"></script>
</head>
4. Register script manager
At the end of the <body> tag in your layout file (~/Views/Shared/_Layout.cshtml):
<body>
@RenderBody()
<!-- Syncfusion ASP.NET MVC Script Manager -->
@Html.EJS().ScriptManager()
</body>
Quick start
Step 1: Add ASP.NET MVC Range Navigator control
Add the Syncfusion ASP.NET MVC Range Navigator control to the ~/Views/Home/Index.cshtml page.
@(Html.EJS().RangeNavigator("container").Render())
Step 2: Run the application
Press Ctrl+F5 to run the application in your browser.
Documentation
Support
License
This is a commercial product and requires a paid license for possession or use. Review the Syncfusion EULA
About Syncfusion
Syncfusion provides 1800+ 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
[email protected] | Toll Free: 1-888-9-DOTNET