SVG Slider - Move dot only along SVG path
<p>I´ve created a circular SVG slider but I still have a problem on positioning the dot correctly. 
Have a look at the current result on Codepen:</p>

<p>HTML:</p>

<pre><code>    &lt;svg version="1.1" id="slider" width="300px" height="150px"&gt; 
       &lt;path id="sliderPath" stroke="red" stroke-width="5" d="M10,100a147,147,0,1,1,280,1"/&gt;
       &lt;circle id="dot" fill="white" cx="10" cy="100" r="14" /&gt; 
    &lt;/svg&gt;
</code></pre>

<p>JS: </p>

<pre><code>var sliderPath = document.getElementById("sliderPath"),
box = sliderPath.getBBox(),
dot = document.getElementById("dot"),
W = box.width,
pathLength = sliderPath.getTotalLength();

Draggable.create(
    document.createElement('div'),
      { 
        type:'x',
        throwProps:true,
        bounds: { minX:0, maxX:W },
        trigger:dot,
        overshootTolerance:0,
        onDrag:update,
        onThrowUpdate:update
});

function update(){ 
  // Get x and y for dot.
  var P = sliderPath.getPointAtLength(this.x / W * pathLength);
  // Set dot.
  TweenLite.set(dot,{attr:{cx:P.x,cy:P.y}});
};
</code></pre>

<p><a href="http://codepen.io/Yheeky/pen/xEbAbR" rel="nofollow">http://codepen.io/Yheeky/pen/xEbAbR</a></p>

<p>You can start dragging the dot and move the mouse from left to right. That works quite well, but I need to set the dot position more directly that the dot position is equal the mouse position but only along the path.
What do I need to change to get this kind of result? </p>

<p>Thanks in advance!</p>