JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<div id="container">
    <img id="image" width="640" height="480" src="https://images.pexels.com/photos/36764/marguerite-daisy-beautiful-beauty.jpg?auto=compress&cs=tinysrgb&h=350"
    />
</div>

CSS

#container {
    width:400px;
    height:300px;
    border:1px solid black;
    overflow:hidden;
    position:relative;
    background: blue;
}
#zoom_wrapper {
    position:absolute;
    z-index:1;
    left:30px;
    top:30px;
}

JavaScript

$(document).ready(function() {
    var c = $('#container'), im = $('#image'), z = $('#zoom');
    var imageHeight = 480,
        imageWidth = 640,
        contWidth = c.width(),
        contHeight = c.height();
    var ratio = Math.min(contWidth / imageWidth, contHeight / imageHeight);
    imageHeight *= ratio;
    imageWidth *= ratio;
    im.css({
        'position': 'absolute',
        'top': '0',
        'left': '0',
        'height': imageHeight + 'px',
        'width': imageWidth + 'px',
        'transform-origin': '0 0'
    });
    var currentScale = 1, currentLocation = {x: 0, y: 0}, mouseLocation = {x: 0, y: 0};
    var minZoom = 0.1, maxZoom = 10, zoomFactor = 0.04;
    zoom(1);
    var zoomFactorInvertLog = 1 / Math.log(zoomFactor);
    c.on('mousewheel', function(e, delta) {
        var cOffset = c.offset();
        mouseLocation.x = e.pageX - cOffset.left;
        mouseLocation.y = e.pageY - cOffset.top;
        var newZoom = clip(currentScale * (1 + delta * zoomFactor), minZoom, maxZoom);
        var sliderVal = Math.log(newZoom) * zoomFactorInvertLog;
        if(slidInvert) sliderVal = slidMin + slidMax - sliderVal;
        z.slider('value', sliderVal);
        zoom(newZoom);
    });
    var slidMin = Math.log(minZoom) * zoomFactorInvertLog, slidMax = Math.log(maxZoom) * zoomFactorInvertLog;
    var slidInvert = (slidMin > slidMax);
    z.slider({
        orientation: 'vertical',
        min: Math.min(slidMin, slidMax),
        max: Math.max(slidMin, slidMax),
        step: Math.abs(slidMin - slidMax) / 20,
        value: slidMin + slidMax
    }).on('slide', function (event, ui) {
        var v = slidInvert ? slidMin + slidMax - ui.value : ui.value;
        var newZoom = Math.pow(zoomFactor, v);
        mouseLocation.x = contWidth / 2;
        mouseLocation.y = contHeight / 2;
        zoom(newZoom);
    });
    function zoom(scale)
    {
        if(scale <= 1)
        {
            currentLocation.x = (contWidth - imageWidth * scale) / 2;
       ...