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/slider.js"></script>
        <link rel="stylesheet" href="../../codebase/slider.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 CSS and JS files of dhtmlxSlider into the header of the created HTML file. The files are:

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

Create container

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

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

slider.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:

  • min - (number) the minimal value of slider, 0 by default
  • max - (number) the maximal value of slider, 100 by default
  • step - (number) the step the slider thumb will be moved with, 1 by default
  • mode - (string) the direction of the Slider scale, "horizontal" by default
  • thumbLabel - (boolean) enables prompt messages with ticks values on hovering over the slider thumb, true by default
  • range - (boolean) enables/disables the possibility to select a range of values on the slider
  • value - (number) the value the thumb will be set at on initialization of the slider
  • inverse - (boolean) enables/disables the inverse slider mode
  • tick - (number) sets the interval of steps for rendering the slider scale
  • majorTick - (number) sets interval of rendering numeric values on the slider scale
  • tickTemplate - (function) sets a template for rendering values on the scale
  • label - (string) specifies the label of a slider
  • labelInline - (boolean) defines whether the label of a slider is rendered on the same level with the trackbar or above it
  • labelWidth - (string) sets the width of a label
  • css - (string) adds style classes for the component

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

Back to top