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,...);
    //or
    var mySlider = new dhtmlXSlider("slider", {                    
        min:1,
        max:100,
        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);
    //or
    var mySlider = new dhtmlXSlider("slider", {                    
    step: 1,
    ...
    });
  • Through the setStep() method called after slider's initialization:
    mySlider.setStep(1);

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.
mySlider.linkTo(objectId);

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

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

Related sample:  Link slider to object

Back to top