Fine tune position of draggable SVG shape without changing X?

Question

The current state of my project can be seen here on jsFiddle .
I'd like to massage the behavior of the sliders just a smidge.
I'm looking for a way to nudge them so that the X value registers from the center of each slider.

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".
Moving a slider as far left as you can feels like it stops short. Moving it as far to the right as possible feels like it overruns its boundary.

I'm sure I could imagine up some really nasty hacks, but I'd much prefer a more professional approach :)
My thoughts first went to CSS (I was kinda hoping to just nudge it a little), but no luck so far.
My guess now is that it will boil down to a JS solution.

Any thoughts/ideas?

Answer 1

You can adjust the position without changing the x value through transformations. All you need is to add the transform attribute...

    <rect id="rect_slider_knob"
         class="slidable"
         width="4%"
         height="24%" 
         y="38%"
         rx="2%"
         ry="3%"
         stroke="#666" 
         transform="translate(-6, 0)"
    />

You can see a demo here: http://jsfiddle.net/mzmRN/

PS It's a pretty nice widget, so I couldn't resist improving the interaction of your fiddle, I hope you don't mind!