JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://yui.yahooapis.com/2.9.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/dragdrop/dragdrop-min.js"></script>
<script src="http://yui.yahooapis.com/2.9.0/build/slider/slider-min.js"></script>
<div id="slider-bg" class="yui-h-slider" tabindex="-1" title="Slider">
    <div id="slider-thumb" class="yui-slider-thumb"><img src="http://yui.yahooapis.com/2.9.0/build/slider/assets/thumb-n.gif"></div>
</div>

<div id="photograph">
        <img id="z_img" src="http://bbhs.leonardtemple.com/Alumni/Comp/1969-BBHS.jpg" width="800" alt="class of 1969 photo" />
</div>

CSS

body {
    margin: 10px;
}
#slider-bg {
    background:url(http://yui.yahooapis.com/2.9.0/build/slider/assets/bg-fader.gif) 5px 0 no-repeat;
}
#slider-thumb {
    left: 0;
}
#photograph {
    width: 500px;
    height: 270px;
    overflow: auto;
}

JavaScript

(function() {
    var Event = YAHOO.util.Event,
        Dom   = YAHOO.util.Dom,
        lang  = YAHOO.lang,
        slider,
        bg = "slider-bg",
        thumb = "slider-thumb";

    var leftConstraint = 0;//The slider can move 0 pixels left
    var rightConstraint = 200;//The slider can move 200 pixels right
    var tickSize = 20;
    var imgWidth = {
        min: 800,
        max: 4096
    };
    var m =  (imgWidth.max - imgWidth.min)  / rightConstraint;//slope m in y = mx c;

    
    Event.onDOMReady(function() {
        slider = YAHOO.widget.Slider.getHorizSlider(bg, thumb, leftConstraint, rightConstraint, tickSize);
        slider.getCalculatedValue = function() {
            return Math.round(m * this.getValue() + imgWidth.min);////linear interpolation; y = mx + c;
        }
        var zoom_img = YAHOO.util.Dom.get('z_img');//Find the DOM node for the target image
        slider.subscribe('change', function (offsetFromStart) {
            zoom_img.style.width = this.getCalculatedValue() + 'px'; //browser looks after height, maintaining image's aspect ratio.
        });
        slider.setValue ( 0, true, false, false );//initialise the slider position and book size
        //parameters: setValue (newOffset , skipAnim , force , silent)
    });
})();