Markup and Scripting

The HTML markup for a wijSlider widget looks like this.

Markup	Copy Code
<div id="slider"></div>

You can initialize the widget with the following jQuery 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>

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.

Concepts

KO

Reference