jQuery slider in asp net
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/jquery-slider-in-aspnet.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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 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 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); } }); });
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/jquery-slider-in-aspnet.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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 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 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); } }); });