## dhtmlXSlider Guide and Samples

### Main features

- wide client side api
- multibrowser support
- integration with HTML Form
- multiple skins
- horisontal and vertical layout

### Supported browsers

- IE 5.5 and above
- Mozilla 1.4 and above
- FireFox 0.9 and above
- Safari 1.3 and above
- Opera 9 and above

### Working with dhtmlXSlider

#### Initialize object on page

- With full Javascript constructor.

    	<script>
    		sld1=new dhtmlxSlider('container_id', 200,"ball",false,1,100,50);
    		sld1.setImagePath("../../codebase/imgs/");
    		sld1.init();
    	</script>

Parameters passed to the constructor are:

- container object
- size
- skin
- vertical orientation flag
- slider step
- slider's max value
- slider initial position
- slider shift value

- 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>

#### Integration with form

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

#### Control and Configure slider

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

#### Applying Skins

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.

#### Events System

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
© DHTMLX LTD.