jquery multiple sliders on page

Suggested Videos
Part 76 - jQuery tabs in asp.net
Part 77 - jQuery datepicker in asp.net
Part 78 - jQuery slider in asp.net



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

    }

});