Рет қаралды 24,583
Link for all dot net and sql server video tutorial playlists
www.youtube.co...
Link for slides, code samples and text version of the video
csharp-video-tu...
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 KZbin channel. Hope you can help.
/ @aarvikitchen5572
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
api.jqueryui.co...
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);
}
});
});