Как назначить значения jQuery для ползунка с левым или правым краем вместо их центров?

Question

Я играю с jQuery пользовательским интерфейсом и обнаружил кое-что разочаровывающее в их реализации слайдера с несколькими ручками.

Я сделал для вас пример здесь. Я сделал ручки немного прозрачными, чтобы вы могли видеть, что происходит:

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;
}

Но ... проблема в том, что, путаясь с полями этих элементов, позиция перетаскивания курсора теперь вне маркера. Попробуйте перетащить нижний левый ползунок и вы поймете, что я имею в виду. Когда вы начинаете перетаскивать его, он перемещается, чтобы соответствовать новой точке перетаскивания, которая больше не находится в центре ручки.

Мне нужно каким-то образом получить активируемую область ручки как границу ручки, но иметь возвращаемое значение дескриптора для ползунка пользовательского интерфейса, чтобы соответствовать правому краю дескриптора (или левому краю для другого дескриптора). Имеет смысл?

Я взглянул на ползунок jquery. js и ... это непостижимо сложно. Кто-нибудь знает, могу ли я взломать это, чтобы заставить его работать?

Answer 1

Я понял!

Мне нужно было добавить значение смещения для обоих ползунков, а затем вычесть это значение из отображаемого результата.

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

});

Answer 2

Это далеко не идеально, но это приближает вас к тому, чего вы пытались достичь. Если мы сделаем ui-slider-handle ширину 0 или, может быть, даже 1, теперь вы можете использовать это в качестве точного контрапункта. Вы можете нажать sh на ручку с помощью padding в CSS, чтобы она снова стала взаимодействующей.

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

Теперь у вас есть один срез для ручки и набивки на соответствующей стороне, а не от центра.