Quickly visualize high-level data and select a time-period with a modern interface to filter data for in-depth analysis.
Integrate seamlessly with Charts, DataGrid, ListView, etc. to show filtered data.
Responsive and adaptive to any mobile devices.

Trusted by the world’s leading companies

Angular angular range selector

Overview

Angular Range Selector 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.

Angular Range Selector Code Example

Easily get started with the Angular Range Selector using a few simple lines of ts code as demonstrated below. Also explore our Angular Range Selector Example that shows you how to render and configure the Range Selector in Angular.

ts
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
  selector: 'app-container',
  // specifies the template string for the RangeNavigator component
  template: `<ejs-rangenavigator id="rn-container"></ejs-rangenavigator>`
  encapsulation: ViewEncapsulation.None
})
export class AppComponent  { }

Data types

Plot any type of data in the range selector using different value types like numeric, date-time, and logarithmic.

Chart types

Plot data in the range selector with different chart types like line, area, and step line.

Lightweight

Skip the chart and show only the range for selecting data. This makes the range selector lightweight in mobile devices.

Lightweight documentation

Scales

Major and minor scales display the range with different intervals and are placed at multiple levels of the range selector. A date-time scale can also be configured to be shown in major and minor scales.

Multilevel labels documentation

Period Selector

Select data using predefined periods in the range selector and use the date picker to select a custom range.

Period selector documentation

Binding selected data

Bind selected data from the range selector to any other data visualization control using built-in events.

Deferred scrolling

Allows you to defer the selected range to be updated until the user stops dragging the scrolling thumbs. This provides a smooth scrolling experience.

Angular Range Selector selection.

Range selection

The range selector control provides the following three 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 range selector are highly customizable with built-in APIs.

Angular Range Selector labels.

Labels

Customize the size, color, font family, font attribute, and alignment of the labels using built-in APIs.

Label customization documentation

Angular Range Selector thumb.

Thumbs

Customize the appearance of the left and right thumbs using built-in APIs.

Thumb customization documentation

Angular Range Selector gridlines.

Gridlines

Customize the color, stroke width, dash array, and visibility of the major and minor gridlines using built-in APIs.

Gridlines customization documentation

Tooltips display the start and end values of a selected range, allowing users to easily select a required range.

Tooltip documentation

RTL

The range selector supports right-to-left rendering and allows the series and scale direction to be displayed from the right to left. This improves the user experience and accessibility of RTL languages.

Touch and Browser support

The interactive range selector control also support touch interactions.

Touch illustration in Angular Range Selector.

Touch support

All the features in range selector will work on touch devices with zero configuration. Use the touch features such as tooltip and thumb drag without any customization.

Responsive illustration in Angular Range Selector.

Responsive

You can view the range selector on various devices. It is also possible to hide chart for particular screen sizes by making a very minimal change.

Cross browser illustration in Angular Range Selector.

Cross browser support

You can render range selector control in all the modern browsers.

Cross browser compatibility documentation

Other supported frameworks

The Range Selector is available for the Blazor, React, JavaScript, and Vue frameworks. Explore its platform-specific options through the following links:

Supported browsers

The Angular Range Selector works well with all modern web browsers, including Chrome, Firefox, Edge, Safari, and Opera.

Supported browsers in Angular Range Selector.

Not sure how to create your first Angular Range Selector? Our documentation can help.

I’d love to read it now

ALL COMPONENTS

SMART COMPONENTS

GRIDS

DATA VISUALIZATION

CALENDARS

DROPDOWNS

FILE VIEWERS & EDITORS

BUTTONS

INTERACTIVE CHAT

INPUTS

NAVIGATION

LAYOUT

FORMS

Query Builder UI

NOTIFICATION

Frequently Asked Questions

✅ Why should you choose the Syncfusion Angular Range Selector?

The Syncfusion Angular Range Selector supports the following features:

A modern interface for quickly selecting a time-period to filter data for in-depth analysis.
Integration with Charts, DataGrid, ListView, and other Syncfusion controls to visualize filtered data.
Responsive design that adapts the control’s UI to any mobile device.
One of the best Angular Range Selector in the market that offers feature-rich UI to interact with the software.
Simple configuration and API.
Support for all modern browsers.
Mobile-touch friendly and responsive.
Extensive demos and documentation to learn quickly and get started with the Angular Range Selector component.

✅ Where can I find the Syncfusion Angular Range Selector demo?

You can find our Angular Range Selector demo, which demonstrates how to render and configure the Range Selector.

✅ Can I download and utilize the Syncfusion Angular Range Selector for free?

No, this is a commercial product and requires a paid license. However, a free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue, 5 or fewer developers, and 10 or fewer total employees.

✅ How do I get started with Syncfusion Angular Range Selector?

A good place to start would be our comprehensive getting started documentation.

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion^® reduces customers’ development time.
Here are some of their experiences.

An amazing toolset to accelerate UI development

The number of components available is the best thing about this library. We think of a UI component, and the Angular JS library already offers it. We use the Angular JS library to accelerate development. The experience using and implementing has been great. The support is also excellent.