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.

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?

Answer 1

This is far from perfect yet it gets you a lot closer to what you were trying to achieve. If we make the ui-slider-handle a width of 0 or maybe even 1, you now can use that as the exact counter point. You can push the handle out with padding in CSS to make it interact-able again.

$(function() {
  $("#mySlider").slider({
    classes: {
      "ui-slider": "collision"
    },
    range: true,
    min: 0,
    step: 1,
    max: 100,
    values: [0, 100],
    slide: function(event, ui) {
      if (ui.values[0] >= ui.values[1]) {
        return false;
      }
      $("#mySliderVal").val(ui.values[0] + " – " + ui.values[1]);
    }
  });

  var sldr = $("#mySlider").slider("widget");
  $(".ui-slider-handle:eq(0)", sldr).css({
    "padding-left": "8px",
    "margin-right": "-2px"
  });
  $(".ui-slider-handle:eq(1)", sldr).css({
    "padding-right": "8px",
    "margin-left": "-2px"
  });

  $("#mySliderVal").val(
    $("#mySlider").slider("values", 0) + " – " + $("#mySlider").slider("values", 1));
});

body {
  font-family: Helvetica, Arial, sans-serif;
  margin: 20px;
  display: flex;
  justify-content: center;
}

#container {
  width: 200px;
}

*:focus {
  outline: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

input,
label {
  font-size: 13px;
}

div.ui-slider.collision {
  margin-top: 10px;
}

div.ui-slider.collision .ui-slider-handle {
  opacity: 0.75;
  width: 0;
}

div.ui-slider.collision .ui-slider-range {
  background: transparent;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="container">
  <input type="text" id="mySliderVal" readonly style="border:0; color:#f6931f; text-align:left;width:75px">
  <div id="mySlider"></div>
</div>