Getting Started with Syncfusion® JavaScript (ES5) Range Navigator Control

Build your first Syncfusion JavaScript (ES5) application with a simple Range Navigator in just a few minutes. This quickstart guides you through creating a minimal, runnable HTML page that loads the Syncfusion EJ2 (ES5) Range Navigator from the CDN, initializes it with sample data, and renders an interactive navigator.

Prerequisites

Dependencies

The Range Navigator control ships as part of the @syncfusion/ej2-charts package. The minimum dependency tree is:

    |-- @syncfusion/ej2-charts
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-pdf-export
    |-- @syncfusion/ej2-file-utils
    |-- @syncfusion/ej2-compression
    |-- @syncfusion/ej2-navigations
    |-- @syncfusion/ej2-calendars

Quick Setup

Step 1: Create Folder and HTML file

  • Create a folder named quickstart in your desired directory.
  • Inside the quickstart folder, create three new files: index.html, index.js, and es5-datasource.js.

Step 2: Add Syncfusion® CDN Resources

Include the following JavaScript links in the <head> section.

Scripts (JavaScript):

<script src="https://cdn.syncfusion.com/ej2/34.1.29/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/34.1.29/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>

Or, to load all Syncfusion components in a single combined bundle:

<script src="https://cdn.syncfusion.com/ej2/34.1.29/dist/ej2.min.js" type="text/javascript"></script>

Step 3: Add the Syncfusion® Range Navigator Control to the Application

The index.html file loads es5-datasource.js and index.js. The es5-datasource.js file contains the sample data, while index.js initializes the Range Navigator.

The Syncfusion scripts provide the ej.charts.RangeNavigator class. The Range Navigator uses the global datasrc array, displays the data as an Area series on a DateTime axis, and renders inside the #element container.

Key options used in the configuration object:

  • valueType — Axis data type. Set to 'DateTime' because the sample data uses date strings.
  • labelFormat — Format string applied to the axis labels (for example, 'dd-MMM').
  • series — Array of series to render. Each series has a dataSource, xName, yName, and type (e.g. 'Area').

Finally, range.appendTo('#element') renders the control into the <div id="element"> element declared in index.html.

Copy the snippets below into the matching files in your quickstart folder.

var range = new ej.charts.RangeNavigator({
    valueType: 'DateTime',
    labelFormat: 'dd-MMM',
    series: [{
        dataSource: datasrc, xName: 'x', yName: 'y', type: 'Area', width: 2,
    }],
});
range.appendTo('#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Range Navigator</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Syncfusion EJ2 Range Navigator control in JavaScript (ES5)">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/ej2-base/dist/global/ej2-base.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/ej2-data/dist/global/ej2-data.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/ej2-svg-base/dist/global/ej2-svg-base.min.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/34.2.2/ej2-charts/dist/global/ej2-charts.min.js" type="text/javascript"></script>
</head>

<body>
    <h1>Syncfusion Range Navigator</h1>
    <div id="element"></div>
    <script src="index.js" type="text/javascript"></script>
</body>

</html>
/**
 * Range Navigator datasource
 */
var datasrc = [
    { x: new Date("2017-05-01"), y: 1402.08 },
    { x: new Date("2017-05-02"), y: 1443.68 },
    { x: new Date("2017-05-03"), y: 1492.00 },
    { x: new Date("2017-05-04"), y: 1515.63 },
    { x: new Date("2017-05-05"), y: 1512.21 },
    { x: new Date("2017-05-06"), y: 1548.29 },
    { x: new Date("2017-05-07"), y: 1555.47 },
    { x: new Date("2017-05-08"), y: 1639.32 },
    { x: new Date("2017-05-09"), y: 1706.93 },
    { x: new Date("2017-05-10"), y: 1756.80 },
    { x: new Date("2017-05-11"), y: 1807.37 },
    { x: new Date("2017-05-12"), y: 1676.99 },
    { x: new Date("2017-05-13"), y: 1759.96 },
    { x: new Date("2017-05-14"), y: 1772.42 },
    { x: new Date("2017-05-15"), y: 1697.38 }
];

Note: Get data from here.

The sample should look like the default. Don’t worry about the gradient color; let it take the default color.

Step 4: Open in Browser

Open quickstart/index.html through a local web server. With the VS Code Live Server extension installed, right-click index.html in the Explorer and choose Open with Live Server, then visit the URL it prints (for example, http://127.0.0.1:5500/). You should see the Syncfusion Range Navigator control displaying the sample data.

Output

The Range Navigator shows 15 days of data. Drag the thumbs to select a date range.

Syncfusion Range Navigator Quick Start Output

Troubleshooting

  • ej is not defined. Confirm that ej2-charts.min.js is loaded before your script. Place the <script> tag inside the <head> or just before your own <script src="index.js"> tag.
  • datasrc is not defined. Make sure es5-datasource.js is loaded before index.js and that it assigns the data to window.datasrc (or datasrc at the top level).
  • The container is empty. Make sure the id in your markup (#element) matches the selector passed to appendTo('#element').
  • The selector doesn’t move. Verify that valueType: 'DateTime' is set and that every x value in your data is a valid Date or a date string parseable by new Date(...).