jquery multiple sliders on page04:33

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 how to control the height, width and opacity of an image using multiple sliders on the page.

HTML
<div id=”sliderHeight”></div>
<br />
<div id=”sliderWidth”></div>
<br />
<div id=”divOpacity”></div>
<br />
<div id=”divDimensions”></div>
<br />
<img id=”myImg” src=”Tulips.jpg”
style=”width: 100px; height: 100px” />

jQuery
$(document).ready(function () {
$(‘#sliderHeight, #sliderWidth’).slider({
min: 100, max: 500, slide: refreshImage
});

$(‘#divOpacity’).slider({
min: 0, max: 100, value: 100,
slide: refreshImage
});

function refreshImage() {
var height = $(‘#sliderHeight’).slider(‘value’);
var width = $(‘#sliderWidth’).slider(‘value’);
var opacity = $(‘#divOpacity’).slider(‘value’)
$(‘#myImg’).css({
height: height, width: width, opacity: opacity / 100
});
$(‘#divDimensions’).html(‘Height : ‘ + height + ‘ Pixels<br/>’ +
‘Width : ‘ + width + ‘ Pixels<br/>’ +
‘Opacity : ‘ + opacity / 100);
}
});