title: Fine tune position of draggable SVG shape without changing X?
body: <p>The current state of my project can be <a href="http://jsfiddle.net/mOrloff/ucnyz/9/" rel="nofollow"><strong>seen here on jsFiddle</strong></a>.<br>
  I'd like to massage the behavior of the sliders just a smidge.<br>
  I'm looking for a way to nudge them so that the X value registers from the center of each slider.</p>
  
  <p>As you can see, the sliders nicely set the values of the inputs, but they look/feel a bit unnatural because the X value is according to the leading edge rather than the "center mass".<br>
  Moving a slider as far left as you can <em>feels</em> like it stops short. Moving it as far to the right as possible feels like it overruns its boundary.</p>
  
  <p>I'm sure I could imagine up some really nasty hacks, but I'd much prefer a more professional approach :)<br>
  My thoughts first went to CSS (I was kinda hoping to just nudge it a little), but no luck so far.<br>
  My guess now is that it will boil down to a JS solution.</p>
  
  <p>Any thoughts/ideas?</p>