Check documentation for the latest version of dhtmlxSuite Configuring Slider DHTMLX Docs

Configuring Slider

Setting Minimum/Maximum/Current Values

There are two possible ways for setting minimum, maximum, and current values in dhtmlxSlider:

  • Through one of initialization parameters:
    var mySlider = new dhtmlXSlider(container,size,skin,vertical,min,max,value,...);
    var mySlider = new dhtmlXSlider("slider", {                    
        value: 50,
  • Through setMin(), setMax(), and setValue() methods called after slider's initialization:
    mySlider.setMin(10); // leftmost position
    mySlider.setMax(10); // rightmost position
    mySlider.setValue(50); // current position
    The current slider's value can be got with the help of method (getValue):
    var value = mySlider.getValue(); // returns current slider's position

Setting Step

It is possible to set minimal allowed difference between slider's values (step) in the following way:

  • Through one of initialization parameters:
    var mySlider = new dhtmlXSlider(container,size,skin,vertical,min,max,value,step);
    var mySlider = new dhtmlXSlider("slider", {                    
    step: 1,
  • Through the setStep() method called after slider's initialization:

Setting Tooltip

There is a method that enables/disables slider's tooltip easily:

mySlider.enableTooltip(true/false); // true by default

This tooltip displays changeable values of the slider when the user moves the slider's thumb.

Related sample:  Enable / disable tooltip

Linking Slider to Object

Slider can be linked to some objects on page. In this case, the linkTo() method is used. The slider can be linked to:

  • An HTML input;
  • An HTML textarea;
  • An HTML select;
  • Any HTML container tag.

The example provided below shows the way how the slider can be linked to an HTML input:

<input type="text" id="input"> 
    var mySlider = new dhtmlXSlider(null, 500);

Related sample:  Link slider to object

Back to top