We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Vue Range Navigator Library

The range navigator control provides an intuitive interface for selecting a small range from a large collection. It is commonly used in financial dashboards to filter a date range for data that needs to be visualized.

Data Types

You can plot any type of data in a range navigator using different value types like numeric, date-time, and logarithmic.

Chart Types

You can plot data in the range navigator using line, area and step line series type.


You can skip the chart and show the range alone to select data. This makes the range navigator light weight in mobile devices.


The major and minor scales display the range with different intervals and are placed at multiple levels of the range navigator. The required date-time scale can be configured to be shown in major and minor scales.

Period Selector

You can also select data using predefined periods in the range navigator.

Binding selected data

You can bind selected data from the range navigator to any other data visualization control.

Deferred scrolling

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

Range selection

The range navigator 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.

Range navigator selection


All the elements of the range navigator are highly customizable.

Range navigator labels


The size, color, font family, font attribute, and alignment of the labels are customizable.

Range navigator thumb


The entire appearance of the left and right thumbs can be customized.

Range navigator gridlines


The color, stroke width, dash array, and visibility of the major and minor gridlines are customizable.


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


The range navigator 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.


Transform your applications today by downloading our free evaluation versionDownload Free Trial

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon