Search results

Getting started with JavaScript Slider control

06 Oct 2021 / 2 minutes to read

The following section explains the required steps to build the Slider component with its basic usage in step-by-step procedure.

Dependencies

The following list of dependencies are required to use the Slider component in your application.

Copied to clipboard
|-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-popups
    |-- @syncfusion/ej2-buttons

Set up your development environment

To get started with Slider component, you can clone the Essential JS 2 quickstart project, and install the packages by using the following commands.

Copied to clipboard
git clone https://github.com/syncfusion/ej2-quickstart.git quickstart
cd quickstart
npm install

The project is preconfigured with the common settings (src/styles/styles.css, system.config.js) to start with all Essential JS 2 components.

Adding Slider to the project

Add the div element with the id attribute #slider inside the body tag in your index.html.

[src/index.html]

Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Slider Component</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name="description" content="Essential JS 2" />
    <meta name="author" content="Syncfusion" />
    <link rel="shortcut icon" href="resources/favicon.ico" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

    <!--style reference from app-->
    <link href="/styles/styles.css" rel="stylesheet" />

    <!--system js reference and configuration-->
    <script src="node_modules/systemjs/dist/system.src.js" type="text/javascript"></script>
    <script src="system.config.js" type="text/javascript"></script>
</head>

<body>
    <div>
        <div class='wrap'>
            <!--element which is going to render the Slider -->
             <div id="slider"></div>
        </div>
    </div>
</body>

<style>
.wrap {
  height: 260px;
  margin: 0 auto;
  padding: 30px 10px;
  width: 260px;
}
</style>

</html>

Import the Slider component into your app.ts and append it to #slider [src/app/app.ts]

Copied to clipboard
import { Slider } from '@syncfusion/ej2-inputs';

// Initialization of Slider component
let slider: Slider = new Slider();

// Render initialized Slider
slider.appendTo('#slider');

Run the application

The Essential JS 2 quickstart application project is configured to compile and run the application in browser. Use the following command to run the application.

Copied to clipboard
npm start
Source
Preview
app.ts
index.html
Copied to clipboard
import { Slider } from '@syncfusion/ej2-inputs';

// Initialization of Slider
let slider: Slider = new Slider({value: 30});
// Render initialized Slider
slider.appendTo('#slider');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 Slider</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 Slider Component" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>
<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div class='wrap'>
          <div id="slider">
          </div>
        </div>
    </div>
</body>
</html>

See Also

Slider Types

Slider Formatting

Orientation Slider

Ticks in Slider

Tooltip in Slider