The HTML markup for a wijSlider widget looks like this.
Drop down to view markup
Markup |
Copy Code
|
<div id="slider"></div> |
You can initialize the widget with the following jQuery script.
Drop down to view script
Script |
Copy Code
|
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#slider").wijslider({
orientation: "vertical",
min: 0,
max: 100,
step: 5,
//Because the range option is false by default, we
//use the value option to set the value for the
//default positions of the thumb button.
//If range were set to true, we would use
//the values option to provide an array of values
//for the two thumbs.
value: 25
});
});
</script> |
The markup and script featured here results in the following live widget. Click and drag the thumb button or click the increment and decrement buttons.
See Also
Concepts
Reference