JSFiddle - React, Tailwind, and code Playground

by Ang Keat

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div class="wrapper">
</div>

CSS

<style>
.wrapper { position: relative; }
</style>

JavaScript

var pdefs = {
      horizontalLine: {
          path: [
					['M',50,240],
					['l',640,0]
				],
          transform: 'r0'
        }
     },
    useDef = 'wiggles';
	
function run()
{
   var paper = Raphael( $('.wrapper')[0], 600, 600 ),
       path = paper.path( Raphael.transformPath(pdefs['horizontalLine'].path, pdefs['horizontalLine'].transform) )
                   .attr( 'stroke-width', 10 )
                   .attr( 'stroke', 'rgb(80,80,80)' ),
       knob = paper.ellipse( 0, 0, 25, 15 )
                   .attr( 'fill', 'lime' )
                   .attr( 'stroke', 'rgba(80,80,80,0.5)' ),
       $shim = $('<div>')
                    .css( {position: 'absolute', width: 50, height: 50 } )
                    .appendTo( $('.wrapper') ),
       len = path.getTotalLength(),
       bb = path.getBBox(),
       mid = {x: bb.x+bb.width/2, y: bb.y+bb.height/2},
       pal = path.getPointAtLength(0);
   knob.translate(pal.x,pal.y).rotate(pal.alpha);
   $shim.css({ left: pal.x-5, top: pal.y-5 });
   $shim.draggable({
         drag: function ( e, ui ) {
            // Find lines and then angle to determine
            // percentage around an imaginary circle.
            var t = ( Raphael.angle( ui.position.left-25, ui.position.top-25, mid.x, mid.y ) ) /360;
            // Using t, find a point along the path
            pal = path.getPointAtLength( (t * len) % len );
            // Move the knob to the new point
            knob.transform( 't' + [pal.x, pal.y] + 'r' + pal.alpha );
         },
         stop: function ( e, ui ) {
            $shim.css({ left: pal.x-25, top: pal.y-25 });
         }
      });
}

run();