JSFiddle - React, Tailwind, and code Playground

by david7418

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/snap.svg/0.1.0/snap.svg-min.js"></script>
<div id="slider"></div>
<svg width="469.89" height="352.41" xmlns="http://www.w3.org/2000/svg" xmlns>
	<defs>
		<clipPath id="a">
			<polygon points="
			351.95 334.48 245.14 276.38 136.71 331.43 158.97 211.88 73.11 125.78 193.68 110 249.04 1.73 301.3 111.53 421.37 130.72 333.1 214.35 351.95 334.48
			" style="fill:none"/>
		</clipPath>
	</defs>
	<title>image mask</title><g style="clip-path:url(#a)">
		<image width="100%" height="100%" xlink:href="https://goo.gl/UG726c" class="cat"/>
	</g>
</svg>

JavaScript

$(function() {
      obj = Snap(".cat");
	  obj.drag();
	  var dimens = obj.node.getBoundingClientRect();     
  console.log(dimens.width)
      $( "#slider" ).slider({
          max: dimens.width, 
		  min:dimens.width/5, 
		  step:1, 
		  value:dimens.width,
          slide: function( event, ui ) {
             obj.attr({
                 width: ui.value
             });
       }
    });
});