JSFiddle - React, Tailwind, and code Playground

by Anil Maharjan

HTML

<svg height=200> 
  <g transform="translate(100,100)">
    <g>
      <circle r="50" fill="#f60"></circle>
    </g>
    <g>
      <clipPath id="g-clip">
      	<rect id="g-clip-rect" y="-50" height="50" x="-50" width="100">
      	</rect>
      </clipPath>
      <circle clip-path="url(#g-clip)" r="47" fill="#fff" ></circle>
    </g>
  </g>
</svg>
<input id="percent" value="50" />
<div id="slider-range-max"></div>

CSS

#slider-range-max {
  width: 250px;
  float: right;
}

#percent {
  width: 35px;
  float: right;
  margin: 0 20px;
}

JavaScript

$(function() {
  $("#slider-range-max").slider({
    range: "max",
    min: 1,
    max: 100,
    value: 50,
    slide: function(event, ui) {
      $("#percent").val(ui.value+'%');
      jQuery('#g-clip-rect').attr('height', 100 - ui.value);
    }
  });
});