JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
    <title>Zoom</title>
    <style>
        body {
            background: #666666;
        }

        .content {
            background: #C3C3C3;
            width: 80%;
            height: 100%;
            margin: auto;
        }

        .img-wrapper {
            display: flex;
            justify-content: center;
            width: auto;
            overflow: auto;
            margin: 0 auto;
        }

        .my-image {
            height: 400px;
            transform-origin: top;
        }

        .slidecontainer {
            position: absolute;
            bottom: 50px;
            left: 47%;
            background: #0b1e2a;
        }

    </style>

</head>

<body>

<div class="content">
    <div class="img-wrapper">
        <img id="bacon" class="my-image"
             src="https://media.istockphoto.com/photos/cooked-bacon-rashers-closeup-isolated-on-a-white-background-picture-id508755080?s=2048x2048"/>
    </div>

    <div class="slidecontainer">
        <input type="range" min="0" max="100" value="0" class="slider" id="img-slider">
    </div>

</div>

<script type="text/javascript">
    function zoom(id, value) {
        var scale = "scale(" + value + ");"
        var style = "-ms-transform:" + scale + "-webkit-transform:" + scale + "transform:" + scale;
        document.getElementById(id).setAttribute("style", style);
    }


    var imgSlider = document.getElementById("img-slider");
    imgSlider.oninput = function () {
        multiplier = 3;
        var zoomlevel = 1 + this.value / 100 * multiplier;
        zoom("bacon", zoomlevel);
    }

</script>

</body>
</html>