Initializing Slider

dhtmlxSlider can be initialized on page using one of the following initialization schemes:

Making Preparations

The first things that need to be done for any type of dhtmlxSlider's initialization are the following:

Download the dhtmlxSlider package from the server and place it in a folder
Create an HTML file;
Place full paths to dhtmlxSlider's CSS and JS files into the header of the created HTML file;

If you use dhtmlxSlider standalone you need to include 2 files:

dhtmlxslider.js
dhtmlxslider.css

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" href="../codebase/dhtmlxslider.css">
        <script src="../codebase/dhtmlxslider.js"></script>
    </head>
    <body>
    ...
    </body>
</html>

If you use dhtmlxSlider as a part of "dhtmlxSuite" package you need to include 2 files:

dhtmlx.js
dhtmlx.css

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

Including source files from CDN

To include JS/CSS files of "dhtmlxSuite" package from CDN, you should set direct links to dhtmlx.js and dhtmlx.css files:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/edge/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/edge/dhtmlx.js" 
    type="text/javascript"></script>

By setting links in this way you will get the latest version of dhtmlxSuite. To get some particular version, just specify the number of the required version in the link, like this:

<link rel="stylesheet" href="http://cdn.dhtmlx.com/5.0/dhtmlx.css" 
    type="text/css"> 
<script src="http://cdn.dhtmlx.com/5.0/dhtmlx.js" 
    type="text/javascript"></script>

Minimal Initialization

The user needs to create an object where dhtmlxSlider will be placed later. In this example the object is a <div> element on page which is placed in the <body> tag:

<div id="sliderObj"></div>

The next step is to create a new dhtmlxSlider and place it after the <div> element (object) that we've just created:

var mySlider = new dhtmlXSlider(parent, size);

The parameters in the above mentioned code string are the following:

parent - (id) id of the object inside which the Slider will be created
size - (number) the size of the slider (in pixels)

When the page is loaded, the slider will be displayed on a page with the minimum value set in it.

Related sample: Init from HTML

Extended Initialization

While creating a Slider with extended initialization, the user should call the same commands described in the Minimal Initialization section.

The code for extended initialization should be like this:

var mySlider = new dhtmlXSlider(parent, size, skin, vertical, min, max, value, step);

The parameters the user should indicate are as follows:

parent - (id) id of the object inside which Slider will be created
size - (number) the size of the slider (in pixels)
skin - (string) the name of the applied skin
vertical - (boolean) vertical orientation flag, set to false by default
minValue - (number) minimum slider's value
maxValue - (number) maximum slider's value
value - (number) slider's current value
step - (number) step of the slider

When the page is loaded, the slider will be displayed on page with the current value set in it.

Related sample: Init with arguments

Initialization by Object Notation

Initialization of this kind is similar to the above mentioned types. The only difference is that the second parameter is an object containing all the initialization parameters:

<div id="slider"></div>
<script>    var mySlider = new dhtmlXSlider({
        parent: "sliderObj",
        size:   100,           
        step:   1,
        min:    1,
        max:    100,
        value:  50
    });
</script>

Other available parameters are enumerated in the article Object Constructor.

Related sample: Init from object

Inline Initialization

This type of initialization presupposes that Slider can be created without indicating an object for it. It should be noted that Slider will be created at the same place where the initialization script was called:

var mySlider = new dhtmlXSlider(null, 300);
//or
var mySlider = new dhtmlXSlider(null, {
    size:100,           
    skin: "ball",
    vertical:false,
    step:1,
    min:1,
    max:100,
    value:50           
});