mSearch 2 и nouislider

Добрый день! Вопрос такой, помогите пожалуйста.
Использую mFilter2

Установлен слайдер (ползунок) для поля цена от компанента nouislider ( шел в шаблоне ).

Значения выводится в input, затем слайдер двигаешь и значение value в поле input изменяется, в nouislider необходимо вывести еще в min и max значения в 
data-start-min="1000" data-start-max="5000" data-min="500" data-max="10000" data-step="1000"
чтобы корректно работал слайдер в связке с полями.
Вопрос как это сделать?
Как я понял есть чанк с слайдером, затем внутри него выводятся два поля input через [[+rows]]. Вопрос, как из [[+rows]] вывести необходимые значения в 
data-min="500" data-max="10000"
чтобы он связался с input и заработал? Подскажите плиз.


Пример кода

чанк tpl.mFilter2.filter.slider

{var $key = $table ~ $delimeter ~ $filter}
<div class="pb-4 mb-2" >
    <h3 class="h6">[[%mse2_filter_[[+table]]_[[+filter]]]]</h3>
    <div class="range-slider" id="mse2_[[+table]][[+delimeter]][[+filter]]" data-start-min="1000" data-start-max="5000" data-min="500" data-max="10000" data-step="1000">
    <div class="range-slider-ui"></div>
        <div class="d-flex align-items-center">
            [[+rows]]
        </div>
    </div>
</div>


чанк tpl.mFilter2.filter.number

<div class="w-50 pe-2">
    <div class="input-group">
        <input class="form-control form-control-sm range-slider-value-min fs-xs" name="[[+filter_key]]" id="mse2_[[+table]][[+delimeter]][[+filter]]_[[+idx]]" value="[[+value]]">
        <span class="input-group-text fs-xs">₽</span>
    </div>
</div>
Michael
Michael
16 июля 2022, 09:50
modx.pro
609
0

Комментарии: 10

Miša Bulic
Miša Bulic
16 июля 2022, 10:57
0
а как подключен ui slider? Что за шаблон?
    Michael
    Michael
    16 июля 2022, 11:15
    0
    Подключен только минифицированный скрипт библиотеки nouislider.min.js и в html выведен код вот так:

    <div class="pb-4 mb-2">
                  <h3 class="h6">Цена</h3>
                  <div class="range-slider" data-start-min="90000" data-start-max="250000" data-min="30000" data-max="500000" data-step="1000">
                    <div class="range-slider-ui"></div>
                    <div class="d-flex align-items-center">
                      <div class="w-50 pe-2">
                        <div class="input-group"><span class="input-group-text fs-base">₽</span>
                          <input class="form-control range-slider-value-min" type="text">
                        </div>
                      </div>
                      <div class="text-muted">—</div>
                      <div class="w-50 ps-2">
                        <div class="input-group"><span class="input-group-text fs-base">₽</span>
                          <input class="form-control range-slider-value-max" type="text">
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
    я пытаюсь этот html натянуть на фильтры. Шаблон я имел ввиду я купил сверстанный шаблон и пытаюсь поставить на mFilter2 этот шаблон. Пробую повторить как в исходных чанах которые идут с mFilter2 и не состыковываемая потому что в nouislider работает с вот этими данными 
    data-start-min="1000" data-start-max="5000" data-min="500" data-max="10000" data-step="1000"
    а как туда подставить данные я не могу понять.
      Miša Bulic
      Miša Bulic
      16 июля 2022, 11:38
      0
      там наверное ещё и default.js от msearch с изменениями
        Michael
        Michael
        16 июля 2022, 11:55
        0
        я не изменял или вы отто имеете ввиду?
          Miša Bulic
          Miša Bulic
          16 июля 2022, 13:04
          0
          ну там по дефолту стоит jquery ui slider. На него всё настроено. Я тоже хотел NoUI поставить, но чё то не получилось. Вот и спрашиваю как там его подключили.
    Артур Шевченко
    Артур Шевченко
    16 июля 2022, 11:11
    0
    Например с помощью JavaScript на событие mse2_load получить нужные значения из инпутов, передать в конструктор слайдера и инициализировать слайдер.
      Michael
      Michael
      16 июля 2022, 11:18
      0
      Классно звучит но ниче не понял. пример можно? Я простой человек, который знает совсем немного modx, могу делать простые вещи пока только. Буду признателен если покажете кусочками кода как это сделать.
        Артур Шевченко
        Артур Шевченко
        16 июля 2022, 11:36
        0
        К modx задача не имеет отношения, кроме события от modx в ней ничего нет. Ты вешал обработчики на клик мыши, нажатие кнопки? Вот точно так же работает и ms2_load. А что до кусочков кода, то увы помочь не могу, я не пользуюсь ни одним из названных слайдеров, но думаю у них есть документация и там написано как инициализировать слайдеры и как перезапускать. В общем, документация в помощь. Если нет желания вникать, тогда в раздел Работа.
        Michael
        Michael
        16 июля 2022, 11:23
        0
        Уже не первый раз слышу про событие mse2_load но на практике так и не понял как спим работать. Мне вот например нужно также используя это событие и скрипты перезагрузить у слайдера tin slider но я так и не понял как это правильно сделать. Возможно я не один такой из начинающих и кому-то будет полезно увидеть на примере как работать с этим событием. не нашел примеров как с ним работать.
          Miša Bulic
          Miša Bulic
          16 июля 2022, 11:39
          0 
          $(document).on('mse2_load', function () {
    lazyLoadInstance.update();
});
          Вот так например обновляется lazyload
        Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
        10