JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="dc_toggle">toggle yellow dragcontainer</a>
<div id="cropzoom">
    <div class="viewport">
        <div class="dragcontainer">
            <img src="http://bitesizedbeautyapp.appspot.com/look/126002/image/look" id="draggable" />
        </div>
    </div>
    <div class="vcrop_zoomSlider"></div>
</div>

CSS

#cropzoom{
    position: relative;
    top: 200px;
    left: 200px;
}

.viewport{
    width: 280px;
    height: 200px; 
    border: 1px solid black;
    overflow: hidden;
    position: relative;
    

}
    
.dragcontainer{
    background-color: blue; 
   
    
}

img{
    opacity: 1;
    cursor: move;
    position: relative;
    top: 0px;
    left: 0px;
}

.vcrop_zoomSlider{
    margin-top: 10px;
    width: 280px;
}

.ui-widget-content {
    background: scroll 50% 50% #FFFFFF;
    border: 1px solid #AAAAAA;
    color: #222222;
}
.ui-widget {
    font-family: Verdana,Arial,sans-serif;
    font-size: 1.1em;
    border-radius: 4px;
}
.ui-slider-horizontal {
    height: 0.8em;    
    position: relative;
}

.ui-slider-horizontal .ui-slider-handle {
    margin-left: -0.6em;
    top: -0.3em;
    background-color: gray;
    border: 1px solid gray;   
}
.ui-slider .ui-slider-handle {
    cursor: default;
    height: 1.2em;
    position: absolute;
    width: 1.2em;
    z-index: 2;
    border-radius: 4px;
    background-color: #ffffff;
}


#dc_toggle{
    padding: 5px;
 display: block;
 background-color: gray;
 z-index: 2;
 position: absolute; 
    top: 10px;
    left: 30px;
    text-align: center;
}

a{
    color: white;
    text-decoration: none;
}

JavaScript

/* actual script */
var img=$("#draggable");
var viewport=$(".viewport");
var dragcontainer=$(".dragcontainer");
var sliderObj=$(".vcrop_zoomSlider");

var orgWidth=img.width();
var orgHeight=img.height();
var orgRatio = orgWidth/orgHeight;


function adjustDimensions(){       
    var containerWidth= img.width()+ (img.width() - viewport.width());
    var containerHeight = img.height()+ (img.height() - viewport.height());
           
    dragcontainer.css({
                            width: containerWidth+"px",
                            height: containerHeight+"px",
                            marginLeft: -(img.width()-viewport.width())+"px",                        
                            marginTop: -(img.height()-viewport.height())+"px"
                                    });

}
    

function changeZoom(percent){

    var minWidth=viewport.width();
    var newWidth= (orgWidth-minWidth)*percent/100+minWidth;
    var newHeight= newWidth/orgRatio;
    var oldSize=[img.width(),img.height()];

    
    img.css({
        width: newWidth+"px",
        height: newHeight+"px"
    });
    
    adjustDimensions(); 
    
    //ugly hack :(
    if (img.offset().left+img.width()>dragcontainer.offset().left+dragcontainer.width()){
        img.css({
            left: dragcontainer.width()-img.width() +"px"
        });  
    }
    if (img.offset().top+img.height()>dragcontainer.offset().top+dragcontainer.height()){
        img.css({
            top: dragcontainer.height()-img.height() +"px"
        });  
    }
   
      
    
}


function init(){  
    adjustDimensions();        
    
    
    img.draggable({
        containment: dragcontainer
    });
    
    sliderObj.slider({
        value: 100,
        slide: function(event,ui){                      
            changeZoom(ui.value);
        }
    });        

}

init();



/* just for debug */
var hideDragContainer=true;

function toggleDragContainer(e){
    e.preventDefault();
    if (hideDragContainer){
       ...