mFilter2 type slider for touch

Здравствуйте! В mFilter2 нет возможности пальцем на touch устройствах(мобилки, планшеты...) передвигать слайдер, например «Цены». Яркий пример этому можно посмотреть на minishop2.com, а вот пример где все норм. 3d-m.ru/3d-printery-professionalnye/
Есть возможность как это поправить, кто сталкивался?
Артур
Артур
04 мая 2017, 19:36
modx.pro
3
3 843
0

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

Андрей
Андрей
05 мая 2017, 09:29
1
+1
mFilter тут ни при чем, вам нужен плагин для jQuery UI, например этот.
    Владимир Новопашин
    Владимир Новопашин
    05 мая 2017, 14:42
    0
    Использовать Ion.RangeSlider, например. Пример можете посмотреть Здесь. Единственно необходимо будет поправить момент что этот слайдер посылает тригер change при движении постоянно, в итоге каталог будет обновляться over500 раз (фильтры отлавливают событие change). Правил тем что в самом коде слайдера изменял отправку события change только когда «отпустили» ползунок.
      Василий Столейков
      Василий Столейков
      30 июня 2017, 09:46
      0
      Классно получилось с ionRangeSlider!
      Можно узнать, что именно вы правили, а то я вчера целый день потерял на то, чтобы синхронизировать этот слайдер с фильтром. У меня фильтр обновляет значения в инпутах, а mFilter2 подставляет устаревшее предыдущее значение цены.
      То есть поставил слайдер на цену 500, mFilter2 обновляется, но цену не меняет. Поставил снова на цену в 800, фильтр обновился и подставил в get-параметры предыдущую цену 500.
        Владимир
        Владимир
        05 мая 2020, 16:56
        0
        Тоже столкнулся с проблемой. Для себя нашел решение:

        1. Для правильных значений в фильтре, добавил код на onFinish:
        $(".range-slider").ionRangeSlider({
        range: true,
        type: "double",
        keyboard: true,
        input_values_separator: ",",
        onFinish:function(ui){
	    $(".range-slider").val(ui.from + ',' + ui.to);
            $(".range-slider").trigger("change");
	},
    });

        2. Для того чтобы отключить постоянную перезагрузку фильтра при перемещении ползунка, в коде слайдера отключить событие change, в этой строке:
        this.old_from === this.result.from && this.old_to ===
                        this.result.to || this.is_start || (this.$cache.input.trigger("change"), this.$cache.input.trigger("input"));
      Дмитрий Кондаков
      Дмитрий Кондаков
      05 мая 2017, 17:17
      0
      После вызова assets/components/msearch2/js/web/lib/jquery-ui.min.js добавьте скрипт raw.githubusercontent.com/furf/jquery-ui-touch-punch/master/jquery.ui.touch-punch.min.js
        Артур
        Артур
        05 мая 2017, 20:11
        0
        Всем спасибо! Все поучилось)
          Игорь Гришанов
          Игорь Гришанов
          22 марта 2019, 09:40
          0
          а у меня не получилось
          jquery.ui.touch-punch.min.js — не помогает
          может что то изменилось в msearch2?
            Игорь
            Игорь
            09 октября 2023, 21:29
            0
            Здравствуйте.
            Тоже пытаюсь «прикрутить» Ion.RangeSlider к mFilter2.
            Может быть кто-нибудь разобрался уже с этим вопросом?
            Вроде бы все и просто должно быть, но по факту корректно не работает совсем у меня.
            1. Чанк tpl.mFilter2.filter.slider:
            <fieldset id="mse2_{$table ~ $delimeter ~ $filter}">
    <div class="price" id="js-range-slider-{$filter_key}">
		<div class="name">{('mse2_filter_' ~ $table ~ '_' ~ $filter) | lexicon}</div>
		<!--<div class="mse2_number_slider mse2_number_inputs row"></div>-->
		<input type="text" class="js-range-slider mse2_number_slider mse2_number_inputs row" name="{$filter_key}" value=""
        data-type="double"
        {$rows}
        data-grid="true"
    />
	</div> 
</fieldset>
            2. Чанк tpl.mFilter2.filter.number (наверное так не правильно делать, но чисто для примера):
            {var $key = $table ~ $delimeter ~ $filter}
{if $idx == 0}data-min="{$value}" data-from="{$value} name="{$filter_key}" id="mse2_{$key}_{$idx}" value="{$value} data-current-value="{$current_value}" class="form-control ml-1""{/if}
{if $idx == 1}data-max="{$value}" data-to="{$value} name="{$filter_key}" id="mse2_{$key}_{$idx}" value="{$value} data-current-value="{$current_value}" class="form-control ml-1""{/if}
            3. Скрипт, который должен реагировать на изменения ползунка (из вашего примера), он вроде даже как-то и «реагирует», но очень странно:
            <script>
    $(".js-range-slider").ionRangeSlider({
        range: true,
        type: "double",
        keyboard: true,
        input_values_separator: ",",
        onFinish:function(ui) { 
	    $('.js-range-slider').val(ui.from + ',' + ui.to);
            $('.js-range-slider').trigger('change');
	} ,
    } ) ;
</script>
              Игорь
              Игорь
              09 октября 2023, 21:49
              0
              сейчас увидел, что это я в чанке tpl.mFilter2.filter.number просто кавычки забыл закрыть в параметре name="{$filter_key}"… но, всё равно, нормально пока не работает — у меня два этих ползунка, а в js я не особо силен… если есть готовое правильное решение — было бы очень круто )
                Игорь
                Игорь
                10 октября 2023, 00:40
                0
                вроде почти со всем уже разобрался… только не могу понять, почему когда мышкой перемещаешь ползунок слайдера, цифры в результате, чаще всего «немножко не правильные» вылазят (когда мышкой двигаю — всё четко)… я так понимаю, что это связано с тем, что «в самом коде слайдера нужно изменить отправку события change только когда «отпустили» ползунок» — только как это сделать, я в js не особо ((
                  Игорь
                  Игорь
                  10 октября 2023, 01:01
                  0
                  ну и выбранные диапазоны цен почему-то не запоминаются (т.е. выбрал диапазон, перезагрузил страницу — в адресной строке браузера цифры есть, в ползунке все «по умолчанию»)… переменная {$current_value} не работает получается?
              Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
              11