jQuery slider in asp net04:33

  • 0
Published on November 8, 2017

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

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

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

Enjoyed this video?
"No Thanks. Please Close This Box!"