jQuery slider in asp.net

Suggested Videos
Part 75 - jQuery accordion using asp.net repeater control
Part 76 - jQuery tabs in asp.net
Part 77 - jQuery datepicker in asp.net



In this video we will discuss using jQuery slider widget in an asp.net web forms application.



We want to increase and decrease the font-size using the slider


HTML

<div id="slider"></div>

<br />

<div id="myDiv" style="font-size: 20px">

    Slider Example

</div>

jQuery code

$(document).ready(function () {

    var divElement = $('#myDiv');

    $('#slider').slider({

        min: 20,

        max: 120,

        orientation: 'horizontal',

        slide: function (event, ui) {

            divElement.css('font-size', ui.value + 'px');

        }

    });

});

For the complete list of slider options and events
http://api.jqueryui.com/slider

Options

Option	Description
min	The minimum value of the slider. The default is 0
max	The maximum value of the slider. The default is 100
orientation	Horizontal or vertical orientation of the slider

Events

Event	Description
start	Triggered when the user starts sliding
stop	Triggered when the user stops sliding
slide	Triggered on every mouse move during slide

The following example handles start, stop and slide events of the slider widget


HTML

<div id="slider"></div>

<br />

<div id="divStart"></div>

<div id="divStop"></div>

<div id="divSlide"></div>

jQuery Code

$(document).ready(function () {

    $('#slider').slider({

        min: 20,

        max: 120,

        orientation: 'horizontal',

        start: function (event, ui) {

            $('#divStart').html('Start = ' + ui.value);

        },

        stop: function (event, ui) {

            $('#divStop').html('Stop = ' + ui.value);

        },

        slide: function (event, ui) {

            $('#divSlide').html('Slide = ' + ui.value);

        }

    });

});