wide client side api

multibrowser support

integration with HTML Form

multiple skins

horisontal and vertical layout

IE 5.5 and above

Mozilla 1.4 and above

FireFox 0.9 and above

Safari 1.3 and above

Opera 9 and above

Initialize object on page

With short javascript code.

You do not need to write all parameters. <script> sld1=new dhtmlxSlider(null,300); sld1.setImagePath("../../codebase/imgs/"); sld1.init(); </script>

With object notation.

You can init slider by object, it can be useful if you need to change only few of default settings. The name of config object properties the same as names of constructor parametrs <script> var sld1 = new dhtmlxSlider("sliderBox", { skin: "ball", shift:100, limit:300, step:50, size:600, vertical:false }); sld1.init(); </script>

From HTML

You can init slider from existing HTML input - just add dhtmlxSlider css class to it. <script> //set path to images (by default it is codebase/imgs folder) for all dhtmlx components window.dhx_globalImgPath="../codebase/imgs/"; </script> //in addition to standard set of js files for slider, add this one to activate autoinitialization <script src="../codebase/ext/dhtmlxslider_start.js"></script> //set class attribute value of input element to "dhtmlxSlider" <input class="dhtmlxSlider" name="slider2" style="width:200px" value="10"><br>

dhtmlxSlider integrates itself in surrounding form by default, so no any additional command necessary.

1. Set minimum value of slider ( leftmost position )

<script> sld1.setMin(10); </script>
2. Set maximum value of slider ( rightmost position )

<script> sld1.setMin(20); </script>
3. Set minimal allowed difference ( slider step )

<script> sld1.setStep(2); </script>
4. To assign existing control to any HTML zone ( including input/select/textarea ) you can use next command
<script> sld1.linkTo(obj) </script>
• obj - object id, or object itself

dhtmlxSlider support few predefined skins, and can be easily adjusted to any custom skin.
Predefined skin can be chosen as third parameter of constructor
<script> var slider1 = new dhtmlxSlider(null, 300, ""); slider1.setSkin("bar"); slider1.init(); </script> Available values are:

• default
• ball
• zipper
• arrow
• arrowgreen
• simplesilver
• simplegray
• bar

Skin can be chnaged on the fly - after initialization.

You can define your own action on the moment user changes position of slider cursor. Use syntax which is common for all dhtmkx components: slider.attachEvent("onChange",function(newValue,sliderObj){ alert("New values is "+newValue); });

Incommin parameters of event handler function:

new value

slider object