Skip to main content

Initialization

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

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

Related sample: Slider.Basic Initialization

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

  • the HTML container for Slider,
  • optional, an object with configuration properties. If this argument is not passed to the constructor, the settings will be default.
script.js
// creating dhtmlxSlider
var slider = new dhx.Slider("slider_container", {
    min: 0,
    max: 100,
    step: 1
});

Related sample: Slider.Basic Initialization

Configuration properties​

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

See the detailed information on configuration properties of Slider in the Slider API overview article.