wijslider

The wijslider widget is a UI that simplifies user input by providing a rich visual representation of numeric changes. The wijslider widget is a sliding selector that provides a simple, familiar way for end-users to choose from a predefined single value or a predefined range of values at run time. The wijslider widget is created by the jquery.wijmo.wijslider.js library

Open the .cshtml file for the View in which you want to display a slider. Add a DOM element, such as this:

<divid="slider"></div>

You can also add CSS styling to the slider. This specifies the width of the slider:

<style type="text/css">
        #slider
        {
            width: 300px;
        }
</style>

To make the slider work, you need to initialize the widget. Add the following script to the .cshtml file.

<script id="scriptInit" type="text/javascript">
   $(document).ready(function () {
       $("#slider").wijslider({ orientation: "horizontal", range: fasle, min: 0, max: 100, step: 2, values: [25] });
   });   
</script>

The script initializes the slider and specifies the orientation, whether or not it is a ranged slider, and the values shown at run time. In this case, it is a horizontal slider with the range set to the default option "false". At run time, the value is set at 25.

For more information about wijslider, click one of the exteranl links to view our Wijmo wiki documentation: