JSFiddle - React, Tailwind, and code Playground

HTML

leftSide <input id="left"/> rightSide <input id="right" />
<br>
<div class="ui-widget-content" style="padding:10px;">

<div class="picturecontainer" style="overflow: hidden; position: relative; width: 650px; height: 150px; border: 1px solid #888;">
    <img style="position: absolute;" class="headerimage ui-corner-all" src="http://upload.wikimedia.org/wikipedia/commons/8/80/NYC_wideangle_south_from_Top_of_the_Rock.jpg" />
    </div>

</div>

CSS

img{
    width:100%;
}

JavaScript

$(function() {
    $(".headerimage").css('cursor', 's-resize');
    var y1 = $('.picturecontainer').height();
    var y2 = $('.headerimage').height();
    $(".headerimage").draggable({
        axis:'x',
        scroll: false,
        drag: function(event, ui) {
            var leftSide = $(this).position().left;
            var rightSide = leftSide + $(this).width();
            $("#left").val(leftSide);
            $("#right").val(rightSide);
            if ( leftSide >= 500) {
                event.preventDefault();
                $(this).animate({left: 0}, 400);
            }
            else if(rightSide < $(".picturecontainer").position().left+ $(".picturecontainer").width() -500)
            {
             event.preventDefault();
                $(this).animate({left: 0}, 400);
            }
            
            if ( leftSide <= 500) {
                event.preventDefault();
                $(this).animate({left: -100}, 400);
            }
            
        },
        stop: function(event, ui) {
            //####
        }
    });
});