如何分配 jQuery 滑块手柄值及其左边缘或右边缘，而不是它们的中心？

Question

我正在玩 jQuery UI，我发现他们的多手柄滑块实现有些令人失望。

我在这里为你做了一个例子。我把手柄稍微透明了，这样你就可以看到发生了什么：

第一个滑块的手柄正常居中。当您单击并拖动它们使它们发生碰撞时，它们会重叠。恶心！

在那个下面，我制作了重复的滑块，除了这个，我用 CSS 来调整手柄位置的边距，这样它们就不会发生碰撞，它们当他们相遇时，彼此对接，就像两个物理滑块一样！太棒了！

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

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

但是...问题是，通过弄乱这些元素的边距，光标拖动位置现在 在手柄之外。尝试拖动左下方的滑块，您会明白我的意思。当您开始拖动它时，它会跳跃以适应新的拖动点，该点不再位于手柄的中心。

我需要以某种方式让句柄的可点击区域成为句柄边界本身，但句柄的 返回值 与 UI 滑块相对应右边缘（或另一个手柄的左边缘）。有道理吗？

我看了一下 jquery slider.js 并且...它非常复杂。有谁知道我是否可以破解它以使其工作？

Answer 1

这远非完美，但它让您更接近您想要实现的目标。如果我们将 ui-slider-handle 设为 0 甚至 1 的宽度，您现在可以将其用作精确的反点。您可以在 CSS 中使用 padding 将手柄推出，使其再次可交互。

$(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>

现在，您在各自的一侧（而不是从中心）获得了一个用于手柄和填充的切片。

Answer 2

我想通了！

我需要为两个滑块添加一个偏移值，然后从显示的结果中减去该值。

$(function() {

  var offset = 3;

  $("#mySlider").slider({
    orientation: "horizontal",
    range: false,
    min: 0 - offset,
    step: 1,
    max: 100 + offset,
    values: [0 - offset, 100 + offset],
    slide: function(event, ui) {

      ui.values[0] = ui.values[0] + offset;
      ui.values[1] = ui.values[1] - offset;

      if (ui.values[0] >= (ui.values[1]) ) { return false; }

      $("#mySliderVal").val( ui.values[0]  + " – " + ui.values[1]);}

  });

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

});

如何分配 jQuery 滑块手柄值及其左边缘或右边缘，而不是它们的中心？

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

css

jquery

jquery-ui

jquery-ui-slider