Проблемы с диапазоном с помощью пользовательского интерфейса

Question

Я пытаюсь установить диапазон с помощью ползунка. Я бы предпочел, чтобы оба курсора не перекрывались в одном значении. Другими словами, как заставить слайдеры зависать и оставаться на месте, когда ползунок минимального значения и ползунок максимального значения находятся рядом друг с другом. Есть идеи? Заранее спасибо.

Answer 1

Расширение диапазона ползунка jQuery UI

Мне нужно что-то подобное, поэтому я написал расширение поверх существующего плагина / виджета-слайдера jQuery UI. Это дополнительные параметры, которые поддерживает это расширение:

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

Вы можете получить код в моем блоге (он обновляется, поэтому я не публикую его здесь напрямую).

Answer 2

Я искал решение этой проблемы, когда делал вчерашний слайдер.

Ничего не сработало из того, что я нашел, потом я сам придумал легкий:

1. Поместите ползунок в контейнерный контейнер с левым и правым отступом

<div class="slider-container">
  <div class="slider-main ..."></div>
</div>

2.Установить стили

-контейнер (левый и правый отступ до половины ширины ручки ползунка)

- ручка (левое поле до минус половины его ширины)

Как-то так (я пишу по памяти)

<style>
  .slider-container {
    padding-left: 8px;
    padding-right: 8px;
  }
  .slider-handle {
    width: 16px;
    margin-left: -8px;
  }
</style>

Вы также должны удалить стили из основной слайдера и переместить их оттуда в контейнер слайдера

Answer 3

Возвращение false из функции слайда, когда они собираются столкнуться, похоже, работает: http://jsbin.com/eyoge3/3

Код из jsbin:

slide: function(event, ui) {
    var oldMin = $("#slider").slider("values", 0);
    var oldMax = $("#slider").slider("values", 1);
    var newMin = ui.values[0];
    var newMax = ui.values[1];

    if( oldMin != newMin && newMin == oldMax )
      return false;
    else if( oldMax != newMax && newMax == oldMin )
      return false;
}