JSP Range Selector Control

Syncfusion jQuery no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 .

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, and other controls to show filtered data.
Responsive and adaptive on any mobile device.

Overview

The JSP Range Selector control provides an intuitive 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.

Data types

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

Numeric type example

Chart types

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

Binding selected data

Bind selected data from the JSP Range Selector control to any other control using built-in events. JSP Range Selector with data binding.

Range selection

The range selector control 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.

JSP Range Selector with range selection.

Customization

All the elements of the JSP Range Selector control are highly customizable with built-in APIs.

JSP Range Selector with labels.

Labels

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

JSP Range Selector with thumbs.

Thumbs

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

JSP Range Selector with grid lines.

Gridlines

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

Tooltip in the JSP Range Selector control displays the start and end values of a selected range, allowing users to easily select the required range.

JSP Range Selector with tooltip

RTL

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

JSP Range Selector with RTL

Touch and responsive support

The interactive JSP Range Selector control also supports touch interactions.

Touch illustration

Touch support

All the features of the range selector will work on touch devices with zero configuration.

Responsive illustration

Responsive

You can view range selector on various devices. You can also hide specific elements in the range selector for particular screen sizes by making very minimal changes to the events.

Cross-browser illustration

Cross-browser support

You can render the JSP Range Selector control in all the modern browsers.

JSP Range Navigator Control

Trusted by the world’s leading companies

Overview

Data types

Chart types

Binding selected data

Range selection