如何使用jQuery滑块句柄的左边缘或右边缘（而不是中心）来指定这些值？

我正在使用jQueryUI，我发现它们的多句柄滑块实现有些令人失望

我在这里为你树立了一个榜样。我已使手柄略微透明，以便您可以看到发生了什么：

第一个滑块的控制柄通常居中。当您单击并拖动它们以使它们碰撞时，它们重叠。真恶心

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

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

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

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

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

---

我瞥了一眼jqueryslider.js，它非常复杂。有人知道我是否可以破解它，使它工作吗？

这远不是完美的，但它让你更接近你试图实现的目标。如果我们将

ui滑块手柄

的宽度设置为

0

或者甚至

1

，您现在可以使用它作为精确的计数器点。您可以使用CSS中的

填充

将手柄推出，使其再次能够交互

$（函数（）{
$（“#mySlider”）.滑块({
课程：{
“ui滑块”：“碰撞”
},
范围：对，
分:0,，
步骤：1，
最高：100，
值：[0,100]，
幻灯片：功能（事件、用户界面）{
如果（ui.values[0]>=ui.values[1]）{
返回false；
}
$（“#mySliderVal”）.val（ui.values[0]+”–“+ui.values[1]）；
}
});
var sldr=$（“#mySlider”）.slider（“小部件”）；
$（“.ui滑块句柄：eq（0）”，sldr.css({
“左填充”：“8px”，
“右边距”：“-2px”
});
$（“.ui滑块句柄：eq（1）”，sldr.css({
“右边填充”：“8px”，
“左边距”：“-2px”
});
$（“#mySliderVal”）.val(
$（“#mySlider”）。滑块（“值”，0）+“–”+$（“#mySlider”）。滑块（“值”，1））；
});
正文{
字体系列：Helvetica、Arial、无衬线字体；
利润率：20px；
显示器：flex；
证明内容：中心；
}
#容器{
宽度：200px；
}
*：焦点{
大纲：无；
-莫兹盒阴影：无；
-webkit盒阴影：无；
盒影：无；
}
输入，
标签{
字体大小：13px；
}
div.ui-slider.collision{
边缘顶部：10px；
}
div.ui-slider.collision.ui滑块句柄{
不透明度：0.75；
宽度：0；
}
div.ui-slider.collision.ui滑块范围{
背景：透明；
}

我想出来了

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

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

});

当我抓取左滑块时，滑块跳出我拖动的位置，并在鼠标指针左侧浮动约15px。不工作：(