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
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:
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
Add a container for Slider and give it an id, for example "slider_container":
index.html
<div id="slider_container"></div>
Initialize Slider with the dhx.Slider
object constructor. The constructor has two parameters:
index.html
// creating dhtmlxSlider
var slider = new dhx.Slider("slider_container", {
min: 0,
max: 100,
step: 1
});
Related sample: Slider.Basic Initialization
There is a set of properties you can specify for Slider to optimize its configuration for your needs. Read the details below.
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 |
tick | sets the interval of steps for rendering the slider scale |
tickTemplate | sets a template for rendering values on the scale |
tooltip | enables a tooltip on hovering over the slider thumb, true by default |
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.
Back to top