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.

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