how to change the height , width and opacity of iamge using slider

jquery multiple sliders on page
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({	find this selector and call slider function
min: 100, max: 500, slide: refreshImage	if slide event raised, we have to implment the function refreshimage
});
$('#divOpacity').slider({
min: 0, max: 100, value: 100,	value is 100 means, after load default value is , we set the value using value:100
slide: refreshImage
});
function refreshImage() {
var height = $('#sliderHeight').slider('value');	slider createed, get the value using value
var width = $('#sliderWidth').slider('value');
var opacity = $('#divOpacity').slider('value')
$('#myImg').css({	change the values by gets from above
height: height, width: width, opacity: opacity / 100
});
$('#divDimensions').html('Height : ' + height + ' Pixels<br/>' +	print the that three in number
'Width : ' + width + ' Pixels<br/>' +
'Opacity : ' + opacity / 100);
}
});
slider css width height