jQuery Ползунок пользовательского интерфейса: как сделать так, чтобы коллизия с ползунком хорошо работала при минимальных и максимальных значениях?

Question

https://codepen.io/ophello/pen/BaNaPdp?editors=0010

У меня есть ползунок jquery .ui, настроенный с двумя дескрипторами одновременно, и реализация смещения, которая позволяет им сталкиваться друг с другом и pu sh каждый прочее.

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

Это код для обработки коллизий:

if (ui.values[0] >= ui.values[1]) {
    if ($(ui.handle).index() == 0) { // if the left handle is being dragged
        ui.values[0] = ui.value + offset;
        ui.values[1] = ui.value + offset + 1;
        $(this).slider("values", 1, ui.value + 1 + offset * 2);
    } else {
        ui.values[0] = ui.value - offset - 1;
        ui.values[1] = ui.value - offset;
        $(this).slider("values", 0, ui.value - 1 - offset * 2);
    }
}

И это предотвращает коллизии дескрипторов, когда одно из значений максимально:

if (ui.values[0] < 1 && ui.values[1] < 1) {
    ui.values[0] = 0; // why doesn't this work at high speeds?
    ui.values[1] = 1; // why doesn't this work at high speeds?
    $(this).slider("values", 1, 1 + offset);
    return false;
} else if (ui.values[0] > yMax - 1 && ui.values[1] > yMax) {
    ui.values[0] = yMax - 1; // why doesn't this work at high speeds?
    ui.values[1] = yMax;     // why doesn't this work at high speeds?
    $(this).slider("values", 0, yMax - 1 - offset);
    return false;
}

Я не могу получить окончательные значения ползунка, чтобы сбросить их до минимальных значений! Когда вы быстро сдвинете оба ползунка вправо или влево, значения должны быть равны sh при 0-1 или 99-100. Но вы получите случайные результаты, если вы сделаете это быстро.

Answer 1

Ваш код на самом деле работает, даже те строки, которые вы прокомментировали, ничего не делают. Если вы вернетесь из функции после этой строки, она будет работать так, как вы планировали.

$(function() {
  var offset = 3;
  var x = 45;
  var y = 55;
  var yMax = 100;

  $("#value").val(x + " – " + y);

  $("#slider").slider({
    orientation: "horizontal",
    range: false,
    min: 0 - offset, // apply offset to address handle collision
    step: 1,
    max: yMax + offset, // apply offset
    values: [x - offset, y + offset], // apply offset
    slide: function(event, ui) {
      ui.values[0] = ui.values[0] + offset; // apply offset
      ui.values[1] = ui.values[1] - offset;

      // collision/push handler
      if (ui.values[0] >= ui.values[1]) {
        if ($(ui.handle).index() == 0) {
          ui.values[0] = ui.value + offset;
          ui.values[1] = ui.value + offset + 1;
          $(this).slider("values", 1, ui.value + 1 + offset * 2);
        } else {
          ui.values[0] = ui.value - offset - 1;
          ui.values[1] = ui.value - offset;
          $(this).slider("values", 0, ui.value - 1 - offset * 2);
        }
      }

      // replace the section below with this to see the other behavior
      // if (ui.values[0] < 0 || ui.values[1] > yMax) { return false }

      if (ui.values[0] < 1 && ui.values[1] <= 1) {
        ui.values[0] = 0
        ui.values[1] = 1
        // this is supposed to tell the RIGHT slider handle to STOP MOVING 
        // by setting its value to 1, but it doesn't do ANYTHING
        $(this).slider("values", 1, 1 + offset); // why doesn't this line do anything???
        return false;
      } else if (ui.values[0] > yMax - 1 && ui.values[1] > yMax) {
        ui.values[0] = yMax - 1
        ui.values[1] = yMax
        // this is supposed to tell the LEFT slider handle to STOP MOVING 
        // by setting its value to 1, but it doesn't do ANYTHING
        $(this).slider("values", 0, yMax - 1 - offset); // why doesn't this line do anything???
        return false;
        
      }

      // if (ui.values[0] < 0 || ui.values[1] > yMax) { return false }

      // Try commenting out the above section and replacing
      // it with this one line to see a closer version of the
      // intended behavior. The problem with this implementation
      // is that it misbehaves when the mouse is flicked outside
      // the slider area while pushing both sliders together.





      // update displayed diameter values
      $("#value").val(ui.values[0] + " – " + ui.values[1]);
    }
  });
});

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

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

input {
  font-size: 13px;
}

input {
  border: 0;
  color: #f6931f;
  text-align: left;
}

#container {
  display: inline;
  padding: 0 0 25px;
  width: 220px;
  margin-left: 10px;
  border: none;
}

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

.ui-slider .ui-slider-handle {
  height: 19px;
  width: 11px;
  margin-left: -6px;
}

<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div id="container">
  <input type="text" id="value" readonly style="width:75px">
  <div id="slider" style="width:212px;height:11px;"></div>

  <p>
  </p>
</div>

Answer 2

Я понял это, отчасти благодаря Mouser!

Проблема с «return false» заключается в том, что он останавливает весь процесс ползунка, пока не обнаружит другое движение. Поэтому перед тем, как вызывать эту функцию, мне нужно убедиться, что мой код выполняет условия, которые я хочу. Я заставляю отображение и значения соответствовать ожидаемому результату, затем вызываю функцию возврата. Посмотрите на ссылку моего оригинального сообщения, чтобы увидеть, как она работает!