Search results

Getting Started

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.

|-- @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.

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]

<!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]

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.

npm start
Source
Preview
index.html
<!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="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>
<body>
    
    <div id="container">
        <div class="wrap">
          <div id="slider">
          </div>
        </div>
    </div>

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Types

The types of Slider are as follows:

Types Usage
Default Shows a default Slider to select a single value.
MinRange Displays the shadow from the start value to the current selected value.
Range Selects a range of values. It also displays the shadow in-between the selection range.

Both the Default Slider and Min-Range Slider have same behavior that is used to select a single value. In Min-Range Slider, a shadow is considered from the start value to current handle position. But the Range Slider contains two handles that is used to select a range of values and a shadow is considered in between the two handles.

Source
Preview

Customization

Orientation

The Slider can be displayed, either in horizontal or vertical orientation. By default, the Slider renders in horizontal orientation.

Source
Preview

Tooltip

The Slider displays the tooltip to indicate the current value by clicking the Slider bar or drag the Slider handle. The Tooltip position can be customized by using the placement property. Also decides the tooltip display mode on a page, i.e., on hovering, focusing, or clicking on the Slider handle and it always remains/displays on the page.

Source
Preview

Buttons

The Slider value can be changed by using the Increase and Decrease buttons. In Range Slider, by default the first handle value will be changed while clicking the button. Change the handle focus and press the button to change the last focused handle value.

After enabling the slider buttons if the ‘Tab’ key is pressed, the focus goes to the handle and not to the button.

Source
Preview