如何使用左边缘或右边缘而不是中心分配 jQuery 滑块句柄值？

Posted 2023-05-08

【中文标题】如何使用左边缘或右边缘而不是中心分配 jQuery 滑块句柄值？

【英文标题】：How do I assign jQuery slider handle values with their left or right edges, instead of their centers?

【发布时间】：2020-05-22 22:36:19

【问题描述】：

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

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

https://codepen.io/ophello/pen/BaNaPdp

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

在那个下面，我制作了重复的滑块，除了这个，我使用 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，发现它非常复杂。有谁知道我是否可以破解它以使其工作？

【参考方案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>

现在您在各自的一侧有一个用于手柄和填充的切片，而不是从中心开始。

【讨论】：

当我抓住左侧滑块时，滑块会跳到我拖动的位置之外，并浮动到鼠标指针左侧约 15px 处。不工作:(

【参考方案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 )
  );

);