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
jQuery code
For the complete list of slider options and events
http://api.jqueryui.com/slider
Options
Events
The following example handles start, stop and slide events of the slider widget
HTML
jQuery Code
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTpzAaJnLYTuk0WqTZCkFogtUW7H1PgjvF826LPW7zGlHCEvSGfBtbXIBp5-y4fB9_JyJL4nkgBcgZ3_42X3JxUCsum_SyCpq5qxIxoOBSQSb5jtKYp2bFEAy0krdZb4VaCS4_vAjN19Q/s1600/jQuery+slider+in+asp.net.png)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiC3S0_LpFJhTgMoVA8sLbgQqaXH-VjCi0psQSHeHCM8AbHEFujRIAzpL91xPL9zCnof_47CzzipLfIHp71rFn7zoMOpeVX_3d1ToV7fOrkH2yaPEM8bVssKuenxdrANNDCK-XuSKEHsU/s1600/jquery+slider+example.png)
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](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTGbPh9ed4-oYnlQB_HmpxQOp9BQOcdBzY7319yMzZXAcxxni3AejPQpqdsyYxFsQgr7k3WLoBxGp0TwphNMspFXB466KpbIu9IdLvnGeNV8PW60OsPx1iDKbDcFNZJgI_UySn1ApR9vQ/s1600/jquery+tutorial.png)
No comments:
Post a Comment
It would be great if you can help share these free resources