Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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
jQuery slider in asp.net

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
jquery slider example

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);
        }
    });
});

jQuery tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.