JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider"></div>
<span id="infoSlider"></span>

<div class="target">
    <img id="image" src="http://practicalaction.org/images/sea-of-ducks-300.jpg" />
</div>

CSS

#slider {
    width : 200px;
}

JavaScript

var orginalWidth = $("#image").width();

$("#infoSlider").text(orginalWidth + ', 100%');

$("#slider").slider({
    value: 0,
    min: -50,
    max: 50,
    step: 10,
    slide: function (event, ui) {
        var fraction = (1 + ui.value / 100),
            newWidth = orginalWidth * fraction;
  
        $("#infoSlider").text(newWidth + ', ' + Math.floor(fraction * 100) + '%');

        $("#image").width(newWidth);
    }
});