WKSlider - Usage

First, include the main JavaScript file and CSS stylesheet in the header of your HTML document:

<link rel="stylesheet" href="WKSlider.css" />
<script type="text/javascript" src="WKSlider.js" ></script>

Next, insert the following markup into your HTML for the slider:

<div id="mySlider1" class="slider">
	<div class="track"></div>
	<div class="knob"></div>
</div>

Finally, initialize the plugin by including the following JavaScript just before the end </body> tag in your HTML. Put your own code within the callback() method for what you want to happen when the slider is moved. The callback() method by default returns a variable that contains percentage (0 to 100).

<script type="text/javascript"> 
window.onload = function() {

	//slider 1
	var mySlider1 = new WKSlider('mySlider1');

	//slider 1 callback
	mySlider1.callback = function (percentage) {

		document.getElementById('mySlider1-output').innerHTML = percentage;
	}
};
</script>