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;
    padding: 0;
}
#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: 450px;
    height: 250px;
    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;
    var rightConstraint = 200;
    var tickSize = 20;
    var imgWidth = {
        min: 800,
        max: 4096
    };
    var m = (imgWidth.max - imgWidth.min) / rightConstraint;//slope m in y = mx c;
    var scrollData;

    var $$ = {
        photograph: $('#photograph'),
        zoom_img: $("#z_img")
    };//cache of jQuery objects
    
    function setCentre(e) {
        scrollData = {
            width: $$.zoom_img.width(),
            centreW: e.offsetX,
            centreH: e.offsetY
        };
        sliderChange.call(slider, 0, true);
    }
    function setScroll(data, animate) {
        var deltaZoom = $$.zoom_img.width() / data.width,
            left = (data.centreW * deltaZoom) - (0.5 * this.width()),
            top =  (data.centreH * deltaZoom) - (0.5 * this.height());
        if(animate) {
            this.animate({ 'scrollLeft': Math.round(left), 'scrollTop': Math.round(top) }, 'fast');
        }
        else {
            this.scrollLeft(Math.round(left));
            this.scrollTop(Math.round(top));
        }
    }
    function sliderChange(offsetFromStart, animate) {
        $$.zoom_img.css('width', this.getCalculatedValue() + 'px'); //browser looks after height, maintaining image's aspect ratio.
        setScroll.call($$.photograph, scrollData, !!animate);
    }

    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;
    }
    slider.subscribe('change', sliderChange);
    slider.setValue( 0, true, false, false );//initialise the slider position and book size
    //parameters: setValue (newOffset , skipAnim , force , silent)

   ...