JSFiddle - React, Tailwind, and code Playground

by kailash19

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div id="container">
<img id="image" src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg"/>
</div>
<br>
<div id="slider"></div>

CSS

#conatiner {
    height: 300px;
    width: 300px;
    overflow:hidden;
    position:absolute;
}

JavaScript

$(document).ready(function() {
    var pic_real_width;
    var pic_real_height;
    $("#image").each(function() {
        var pic = $( this );

        pic_real_width = pic.width();
        pic_real_height = pic.height();
        alert(pic_real_width+","+pic_real_height);

    });
    
    $('#slider').slider({
        range: "max",
        orientation: "vertical",
        min: 0,
        max: 500,
        step: 10,
        slide: function(event, ui) {
            var newWidth = pic_real_width + ui.value;
            var newHeight = pic_real_height + ui.value;
            $("#image").css('height', newHeight);
            $("#image").css('width', newWidth);
                                        
        }
    });
});