Initialization

To initialize dhtmlxSlider on a page, you need to take the following simple steps:

Download the Slider package and unpack it into a folder of your project
Include source files
Create a container
Initialize Slider with the object constructor

<!DOCTYPE html>
<html>
    <head>
        <title>How to Start with dhtmlxSlider</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 dhtmlxSlider 
            var slider = new dhx.Slider("slider_container", {
                min: 0,
                max: 100,
                step: 1,
                value: 30
            });
        </script>
    </body>
</html>

Include source files

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

suite.js
suite.css

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

Create 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 has two parameters:

the HTML container for Slider,
optional, an object with configuration properties (see the full list below). If this argument is not passed to the constructor, the settings will be default.

index.html

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

There is a set of properties you can specify for Slider to optimize its configuration for your needs. Read the details below.

Configuration properties

You can specify the following properties in the configuration object of Slider:

css	adds style classes for the component
helpMessage	adds an icon with a question mark next to Slider
hiddenLabel	adds a hidden label for a Slider that will be used while sending a form to the server
inverse	enables/disables the inverse slider mode
label	specifies the label of a slider
labelPosition	defines the position of a label of a slider: "left"\|"top"
labelWidth	sets the width of a label
majorTick	sets interval of rendering numeric values on the slider scale
max	the maximal value of a slider, 100 by default
min	the minimal value of a slider, 0 by default
mode	the direction of the Slider scale, "horizontal" by default
range	enables/disables the possibility to select a range of values on the slider
step	the step the slider thumb will be moved with, 1 by default
tooltip	enables a tooltip on hovering over the slider thumb, true by default
tick	sets the interval of steps for rendering the slider scale
tickTemplate	sets a template for rendering values on the scale
value	the value the thumb will be set at on initialization of the slider

The detailed information on configuration options can be found in the Configuration article.