@{
	ViewBag.Title = "Overview";
	Layout = "~/Views/Shared/_WidgetLayout.cshtml";
}

@section header
{
    <script id="scriptInit" type="text/javascript">
        $(document).ready(function () {
            $("#hSlider").wijslider({ orientation: "horizontal", range: false, min: 0, max: 500, step: 10, value: 250, values: null });
            $("#vSlider").wijslider({ orientation: "vertical", range: false, min: 0, max: 500, step: 10, value: 250, values: null });
        });    
    </script>
    <style type="text/css">
        .sliderContainer
        {
        }
        
        .layout
        {
            float: left;
            margin: 0 10px;
        }
        .layout h6
        {
            margin-bottom: 10px;
        }
        #hSlider
        {
            width: 200px;
        }
        #vSlider
        {
            height: 200px;
        }
    </style>
}

<h2>Overview</h2>
<div class="main demo">
            <!-- Begin demo markup -->
            <div class="sliderContainer ui-helper-clearfix">
                <div class="layout">
                    <h6>
                        Horizontal Slider</h6>
                    <div id="hSlider">
                    </div>
                </div>
                <div class="layout">
                    <h6>
                        Vertical Slider</h6>
                    <div id="vSlider">
                    </div>
                </div>
            </div>
            <!-- End demo markup -->
            <div class="demo-options">
                <!-- Begin options markup -->
                <!-- End options markup -->
            </div>
        </div>
@section description{
	<p>
                The wijslider widget simplifies user input by providing a rich visual representation
                of numeric changes. The wijslider is a sliding selector that provides a simple,
                familiar way for end-users to choose a single value or a range of values in a predefined
                range at run time.</p>
            <p>
                The wijslider can be used either horizontally or vertically. This sample shows how
                to set the wijslider in either way, by using the orientation option.</p>
}