How do I assign jQuery slider handle values with their left or right edges instead of their centers

Question

I'm playing with jQuery UI, and I've discovered something disappointing about their multi-handle slider implementation.

I've made an example for you here. I've made the handles slightly transparent so you can see what's going on:

The first slider has the handles centered normally. When you click and drag them so they collide, they overlap. Gross!

Below that one, I made duplicate slider, except for this one, I've used CSS to adjust the margins of the handle positions so they don't collide, and they butt up right against each other when they meet, just like two physical sliders would! Great!

#mySlider2 .ui-slider-handle:first-child {
  margin-left: -12px !important;
}

#mySlider2 .ui-slider-handle:last-child {
  margin-left: -1px !important;
}

But... the problem is that by messing with the margins of these elements, the cursor drag position is now outside the handle. Try dragging the bottom left slider and you'll see what I mean. When you start to drag it, it jumps to fit the new drag point, which is not in the center of the handle anymore.

I need to somehow get the handle's clickable area to be the handle boundary itself, but have the handle's returned value for the UI slider to correspond to the handle's right edge (or left edge for the other handle). Make sense?

I took a peek at the jquery slider.js and...it's impenetrably complex. Does anyone know if I can hack this to make it work?