mFilter2 type slider for touch

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

Артур

04 мая 2017, 19:36

3 467

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

Андрей

05 мая 2017, 09:29

mFilter тут ни при чем, вам нужен плагин для jQuery UI, например этот.

Владимир Новопашин

05 мая 2017, 14:42

Использовать Ion.RangeSlider, например. Пример можете посмотреть Здесь. Единственно необходимо будет поправить момент что этот слайдер посылает тригер change при движении постоянно, в итоге каталог будет обновляться over500 раз (фильтры отлавливают событие change). Правил тем что в самом коде слайдера изменял отправку события change только когда «отпустили» ползунок.

Василий Столейков

30 июня 2017, 09:46

Классно получилось с ionRangeSlider!
Можно узнать, что именно вы правили, а то я вчера целый день потерял на то, чтобы синхронизировать этот слайдер с фильтром. У меня фильтр обновляет значения в инпутах, а mFilter2 подставляет устаревшее предыдущее значение цены.
То есть поставил слайдер на цену 500, mFilter2 обновляется, но цену не меняет. Поставил снова на цену в 800, фильтр обновился и подставил в get-параметры предыдущую цену 500.

Владимир

05 мая 2020, 16:56

Тоже столкнулся с проблемой. Для себя нашел решение:

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

После вызова 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

Всем спасибо! Все поучилось)

Игорь Гришанов

22 марта 2019, 09:40

а у меня не получилось
jquery.ui.touch-punch.min.js — не помогает
может что то изменилось в msearch2?

Игорь

09 октября 2023, 21:29

Здравствуйте.
Тоже пытаюсь «прикрутить» 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

сейчас увидел, что это я в чанке tpl.mFilter2.filter.number просто кавычки забыл закрыть в параметре name="{$filter_key}"… но, всё равно, нормально пока не работает — у меня два этих ползунка, а в js я не особо силен… если есть готовое правильное решение — было бы очень круто )

Игорь

10 октября 2023, 00:40

вроде почти со всем уже разобрался… только не могу понять, почему когда мышкой перемещаешь ползунок слайдера, цифры в результате, чаще всего «немножко не правильные» вылазят (когда мышкой двигаю — всё четко)… я так понимаю, что это связано с тем, что «в самом коде слайдера нужно изменить отправку события change только когда «отпустили» ползунок» — только как это сделать, я в js не особо ((

Игорь

10 октября 2023, 01:01

ну и выбранные диапазоны цен почему-то не запоминаются (т.е. выбрал диапазон, перезагрузил страницу — в адресной строке браузера цифры есть, в ползунке все «по умолчанию»)… переменная {$current_value} не работает получается?

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.