Как установить разные поля и ограничения для подключенных диапазонов - PullRequest
Новая
       23

Как установить разные поля и ограничения для подключенных диапазонов

1 голос
/ 23 марта 2019

Я использую NoUiSlider , и мой основной вариант использования - иметь несколько диапазонов, которые могут действовать независимо.

Например, 2 диапазона, представляющих 2 годовых диапазона:

  • один диапазон 2002 г. (с начала 2002 г. до конца 2002 г.)
  • один диапазон начала 2007 г.до конца 2010 года.

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

Range Sliders Это прекрасно работает.

Однако у меня есть некоторые ограничения.Например, пользователь не может создать диапазон, который больше или меньше определенного размера.У NoUiSlider есть опции, которые управляют этим: Margin и Limit .Они налагают ограничения, но действуют глобально для всех дескрипторов (во всех диапазонах).

Я действительно беспокоюсь только о соблюдении правил среди связанных дескрипторов в одном диапазоне.

В этой скрипке: https://jsfiddle.net/hbL4v0ce/ вы можете увидеть поведение. 

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
  start: [2002, 2003, 2008, 2012],
  step: 1,
  connect: [false, true, false, true, false],
  margin: 0,
  limit: 4,
  behaviour: 'drag',
  range: {
    'min': 2000,
    'max': 2016
  },
  pips: {
    mode: 'steps',
    density: -1
  },
});

Правый диапазон больше не может быть перемещен вправо, потому что одна из ручек уже настроенаОграничение в 4 единицы от левого диапазона, и аналогичным образом левый диапазон больше нельзя перемещать влево.Это не то поведение, которое мне нужно.

Если бы я мог указать отдельные пределы / поля для каждого подключенного диапазона, думаю, это решило бы мою проблему.Можно ли сделать это?Или есть другой подход для достижения моих целей?

1 Ответ

1 голос
/ 25 марта 2019

noUiSlider не имеет возможности использовать разные поля / ограничения для разных дескрипторов.У вас есть несколько вариантов:

  • Абстрагируйте годы от ползунка и отобразите значения ползунка на годы в формататоре.Например, вы можете запустить бегунок от 0 до 100, а затем сопоставить значения для последних двух дескрипторов с 2007 по 2010 год. Затем вы можете применить любые ограничения, которые есть у вас в update событии .Это может выглядеть / работать лучше, если вы отключите опцию step и внедрите «мягкие ограничения» .

  • В качестве альтернативы, вы можете отключить marginи реализуйте поведение маржи самостоятельно, используя метод set в событии update.Есть довольно хороший пример того, как это сделать в этом выпуске Github .

...