Initialization

info

Download the DHTMLX Slider package as part of the DHTMLX Suite library.

Follow these steps to add DHTMLX Slider to an application:

• Include source files
• Create a container
• Initialize Slider with the object constructor

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with DHTMLX Slider</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="slider_container"></div>
        <script>
            // creating DHTMLX Slider 
            const slider = new dhx.Slider("slider_container", {
                min: 0,
                max: 100,
                step: 1,
                value: 30
            });
        </script>
    </body>
</html>

Include source files

Unpack the downloaded package into your project folder.

Create an HTML file and add the full paths to the JS and CSS files of the DHTMLX Suite library in its header. The files are:

• suite.js
• suite.css

<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Create a container

Add a container for Slider and give it an id, for example slider_container:

index.html

<div id="slider_container"></div>

Initialize Slider

Initialize Slider with the dhx.Slider object constructor. The constructor takes two parameters:

• The HTML container for Slider
• An object with configuration properties (optional). If you omit this argument, Slider uses the default settings.

index.js

// creating DHTMLX Slider
const slider = new dhx.Slider("slider_container", {
    min: 0,
    max: 100,
    step: 1
});

Configuration properties

The Slider API overview article describes the properties you can specify to adapt Slider to your needs.

Example