jQuery tutorial for beginners - jquery multiple sliders on page

Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/06/jquery-multiple-sliders-on-page.html 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 YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 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); } });