Двухдиапазонный фильтр-слайдер по дополнительным свойствам (ползунок - slider)

25 марта 2025 г.

Добрый день!
Хочу добавить на сайт в боковую колонку фильтр-слайдер по дополнительным свойствам, не по цене, а именно по дополнительным свойствам. Чтобы ползунок можно было передвигать по двум диапазонам: минимальному и максимальному значениям, а также, при необходимости вводить вручную значения этих свойств в окошках-<input>ах. Для этого я даже установил, по рекомендации админа HostCMS, шаблон с Универсальным интернет-магазином. И всё равно не могу понять, как сделать так, чтобы отображался именно двухдиапазонный фильтр-слайдер.
Числовые значения в дополнительных свойствах есть как Целое число property_value_ints, так и Число с плавающей запятой property_value_floats.
Часть кода в XSL-шаблоне:

    <xsl:when test="filter = 6">
        <div class="propertyInput">
            <input class="w-100" type="range" min="{min}" max="{max}" id="range" step="1" value="{@id}" name="range" data-property="{tag_name}" />

            <div class="row pe-3 mb-4" id="property_{@id}">
            <label class="col-auto col-form-label pt-1" for="property_{@id}_from">от</label>
            <input class="col form-control text-center" id="property_{@id}_from" type="text" name="property_{@id}_from" size="5" placeholder="{min}" data-min="{min}" value="{min}" data-property="{tag_name}">
                <xsl:if test="/shop/*[name()=$nodename_from] != 0">
                 <xsl:attribute name="value"><xsl:value-of select="/shop/*[name()=$nodename_from]" /></xsl:attribute>
             </xsl:if>
            </input>

            <label class="col-auto col-form-label pt-1" for="property_{@id}_to">до</label>
            <input class="col form-control text-center" id="property_{@id}_to" type="text" name="property_{@id}_to" size="5" placeholder="{max}" data-max="{max}" value="{max}" data-property="{tag_name}">
                <xsl:if test="/shop/*[name()=$nodename_to] != 0">
                 <xsl:attribute name="value"><xsl:value-of select="/shop/*[name()=$nodename_to]" /></xsl:attribute>
             </xsl:if>
            </input>

            </div>

            <input name="property_{@id}_from_original" data-min="{min}" value="{min}" hidden="hidden" data-property="{tag_name}" />
            <input name="property_{@id}_to_original" data-max="{max}" value="{max}" hidden="hidden" data-property="{tag_name}" />
        </div>
    </xsl:when>

Всё равно выводится нерабочий слайдер с одним диапазоном.
Могут ли мне помочь слайдеры Slider plugin или Ion.RangeSlider? И какой для этой цели лучше?
Может у кого-нибудь есть положительный опыт в этом вопросе? Поделитесь?..

25 марта 2025 г.

Re: Двухдиапазонный фильтр-слайдер по дополнительным свойствам (ползунок - slider)

Виды деревьев – база данных пород древесины
Читаю документацию - у <input>а type="range", а это однодиапазонный слайдер.
Читаю у польских товарищей про Multi Range Slider, но там всё закодировано.

26 марта 2025 г.

Re: Двухдиапазонный фильтр-слайдер по дополнительным свойствам (ползунок - slider)

1. "Способ отображения свойства в фильтре" у свойства выставить "От.. до.."
2. Подключить и настроить плагин слайдеров
3. Ловить события слайдера - чтобы обновлять значения в инпутах
4. Ловить события инпутов - чтобы обновлять слайдеры

HostDev.pw - модули для HostCMS, Telegram: @hostdev

26 марта 2025 г.

Двухдиапазонный фильтр-слайдер по дополнительным свойствам (ползунок - slider)

HostDEV.pw, всё верно. Я так и сделал.
1. Выставил способ отображения свойств в фильтре “От…до…”.
2. Подключил и настроил плагин Ion.RangeSlider, вот этот.
Сделал всё по инструкции:
• в шаблоне подключил <link>и и <script>ы;
• прописал <input> в XSL-шаблоне;
• в макете, во вкладке “Javascript” инициализировал экземпляр

$(".js-range-slider").ionRangeSlider();

В общем всё сделал по инструкции…
На первый взгляд отображается всё правильно: внешний вид, значения. Но когда я начал тестирование, происходит следующее…
При передвижении ползунков они просто не работают – сбрасываются на начальные значения.
Сбросил все фильтры и заново начал тестирование. Другими фильтрами, которые работают корректно (свойства отображаются флажками, списком со множественным выбором), сделал определённую выборку – свойства “От…до…” (с ползунками) выбрались правильно, но шкала также приняла эти выбранные значения, не изначальные (без выборки), а вот эти обновлённые.

Вот фрагмент кода XSL-шаблона:

<xsl:when test="filter = 6">
        <div class="propertyInput">

            
            <input type="text" class="js-range-slider" name="range"
                   value="{@id}" data-type="double" data-skin="round"
                   data-min="{min}" data-max="{max}" id="property_{@id}"
                   data-from="{min}" data-to="{max}" data-grid="true" />

            <div class="row pe-3 mb-4" id="property_{@id}">
            <label class="col-auto col-form-label pt-1" for="property_{@id}_from">от</label>
            <input class="col form-control text-center" id="property_{@id}_from" type="text" name="property_{@id}_from" size="5" placeholder="{min}" data-min="{min}" value="{min}" data-property="{tag_name}">
                <xsl:if test="/shop/*[name()=$nodename_from] != 0">
                 <xsl:attribute name="value"><xsl:value-of select="/shop/*[name()=$nodename_from]" /></xsl:attribute>
             </xsl:if>
            </input>

            <label class="col-auto col-form-label pt-1" for="property_{@id}_to">до</label>
            <input class="col form-control text-center" id="property_{@id}_to" type="text" name="property_{@id}_to" size="5" placeholder="{max}" data-max="{max}" value="{max}" data-property="{tag_name}">
                <xsl:if test="/shop/*[name()=$nodename_to] != 0">
                 <xsl:attribute name="value"><xsl:value-of select="/shop/*[name()=$nodename_to]" /></xsl:attribute>
             </xsl:if>
            </input>
            </div>

            <input name="property_{@id}_from_original" value="{/shop/*[name()=$nodename_from]}" hidden="hidden" data-property="{tag_name}" />
            <input name="property_{@id}_to_original" value="{/shop/*[name()=$nodename_to]}" hidden="hidden" data-property="{tag_name}" />
        </div>
    </xsl:when>

А вот данные, которые попадают в HTML (при выборке):

То есть, вот начальные данные:

А вот при выборке:

data-min="910" data-max="1095" id="property_370" data-from="910" data-to="1095"

То что выделено жирным шрифтом, то неверно!

26 марта 2025 г.

Re: Двухдиапазонный фильтр-слайдер по дополнительным свойствам (ползунок - slider)

После выборки другими свойствами в окошках под ползунками правильные изначальные значения, а на шкале ползунка неправильные значения - значения отображаются “после выборочные”…

27 марта 2025 г.

Re: Двухдиапазонный фильтр-слайдер по дополнительным свойствам (ползунок - slider)

Dmitry K.,

http://ionden.com/a/plugins/ion.rangeslider/showcase.html

https://jsfiddle.net/IonDen/avcm6wpj/

HostDev.pw - модули для HostCMS, Telegram: @hostdev

Авторизация