Ползунок базового диапазона с 2 входами? - PullRequest
Новая
       8

Ползунок базового диапазона с 2 входами?

0 голосов
/ 06 декабря 2018

Возможно ли иметь 2 разных входа, управляющих ползунком диапазона Foundation?Мне нужно добавить поле для установки определенных фракций (например, так): https://codepen.io/jinch/pen/OaKpZX?editors=1000

<div class="row">
        <div class="small-2 columns">Width:</div>
  <div class="small-5 columns">
          <div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
            <span class="slider-handle slideWidth"  data-slider-handle role="slider" tabindex="1" aria-controls="customPort-2-width"></span>
              <span class="slider-fill" data-slider-fill></span>
          </div>
  </div>
  <div class="small-5 columns">
    <input type="number" step="1" id="customPort-2-width" style="border: 1px solid #999999; display:inline-block; width:39%;">
    <select class="fractions fractionWidth" name="WidthFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
      <option value="0" selected="">0</option>
      <option value="1/8">1/8</option>
      <option value="1/4">1/4</option>
      <option value="3/8">3/8</option>
      <option value="1/2">1/2</option>
      <option value="5/8">5/8</option>
      <option value="3/4">3/4</option>
      <option value="7/8">7/8</option>
            </select>
    <span class="small">in.</span>
  </div>

1 Ответ

0 голосов
/ 11 декабря 2018

TL; DR. Хорошая новость в том, что это можно сделать!Плохая новость заключается в том, что вам нужно немного скорректировать код.Я набираю это в десять минут после полуночи, так что вам, скорее всего, потребуется рефакторинг этого, но я надеюсь, что это отправная точка.

Я расскажу о причинах реализации, но если выхочу просто в нее разобраться, я создал Codepen https://codepen.io/jamie-endeavour/pen/zyxPaY?editors=1010

немного фона

Когда я впервые нашел этот вопрос, я посмотрел документацию Sliderи заметил раздел о 'Reflow' - https://foundation.zurb.com/sites/docs/slider.html#reflow - после прочтения об этом методе я решил заглянуть в исходный код Foundation: 

  _reflow() {
    this.setHandles();
  }

Затем я посмотрел на setHandles() ... 

  setHandles() {
    if(this.handles[1]) {
      this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true, () => {
        this._setHandlePos(this.$handle2, this.inputs.eq(1).val(), true);
      });
    } else {
      this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true);
    }
  }

Обратите внимание, что _setHandlePos() делает ссылку на значение из свойства с именем inputs.

Когда класс Slider инициализируется, устанавливаются следующие параметры: 

this.inputs = this.$element.find('input');

this.$input = this.inputs.length ? this.inputs.eq(0) : $(`#${this.$handle.attr('aria-controls')}`);

В вашем примере вы не указали элемент ввода.Итак, как вы можете видеть, код использует значение aria-controls для создания селектора «ввода».В этом и заключается ваше ограничение, поскольку вы не сможете таким образом связать два поля ввода с ползунком.

Решение

Итак, запомните троичнуюбыл использован в this.$input?Если мы добавим <input> в ваш элемент .slider, то мы сможем использовать его как опорную точку для ползунка. 

<div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
  <input type="hidden" id="slider-reference" value="8" />
  ...

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

JS, требуемый для ввода number, довольно прост, поскольку мы поставляемабсолютное число, необходимое Slider для расчета ширины позиции.

Ввод дроби становится немного странным, потому что вам нужно возвращать дробь разности между вашим минимальным и максимальным значением (28), а не дробь вашего максимального значения (в данном случае 36).Вот почему я включил дополнительные вычисления, чтобы убедиться, что вы получаете правильную позицию относительно элемента Slider.Я также считаю, что эту часть можно реорганизовать свежим взглядом ?

Наконец, когда вы получили новые значения в каждом обработчике изменений, вы просто вызываете метод _reflow, и это обновитПлагин слайдера, соответственно, без необходимости повторной инициализации плагина или чего-то еще такого неприятного!

Надеюсь, это поможет!

...