Wijmo UI for the Web
Markup and Scripting
Wijmo User Guide > Widgets > Slider > 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>

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

KO

Reference