{% set filterItemId = 'filter-' ~ name ~ '-' ~ random() %}
{% if filterRangeActiveMinLabel is not defined %}
{% set filterRangeActiveMinLabel = 'listing.filterRangeActiveMinLabel'|trans({'%displayName%': displayName})|sw_sanitize %}
{% endif %}
{% if filterRangeActiveMaxLabel is not defined %}
{% set filterRangeActiveMaxLabel = 'listing.filterRangeActiveMaxLabel'|trans({'%displayName%': displayName})|sw_sanitize %}
{% endif %}
{% if filterRangeErrorMessage is not defined %}
{% set filterRangeErrorMessage = 'listing.filterRangeErrorMessage'|trans|sw_sanitize %}
{% endif %}
{% if filterRangeLowerBoundErrorMessage is not defined %}
{% set filterRangeLowerBoundErrorMessage = 'listing.filterRangeLowerBoundErrorMessage'|trans({'%lowerBound%': lowerBound})|sw_sanitize %}
{% endif %}
{% if minKey is not defined %}
{% set minKey = 'min-price' %}
{% endif %}
{% if maxKey is not defined %}
{% set minKey = 'max-price' %}
{% endif %}
{% if unit is not defined %}
{% set unit = page.header.activeCurrency.symbol %}
{% endif %}
{# @deprecated tag:v6.5.0 - `currencySymbol` will be removed use `unit` instead #}
{% if currencySymbol is defined %}
{% set unit = currencySymbol %}
{% endif %}
{% if minInputValue is not defined %}
{% set minInputValue = 0 %}
{% endif %}
{% if maxInputValue is not defined %}
{# @deprecated tag:v6.5.0 - use maxInputValue instead of price #}
{% set maxInputValue = price.max %}
{% endif %}
{% set filterRangeOptions = {
name,
minKey,
maxKey,
lowerBound,
unit,
currencySymbol,
snippets: {
filterRangeActiveMinLabel,
filterRangeActiveMaxLabel,
filterRangeErrorMessage,
filterRangeLowerBoundErrorMessage
}
} %}
{% block component_filter_range %}
{# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
<div class="filter-range filter-panel-item{% if not sidebar %} dropdown{% endif %}{% if feature('v6.5.0.0') %} d-grid{% endif %}"
data-filter-range="true"
data-filter-range-options='{{ filterRangeOptions|json_encode }}'>
{% block component_filter_range_toggle %}
{# @deprecated tag:v6.5.0 - Bootstrap v5 removes `btn-block` class, use `d-grid` wrapper instead #}
<button class="filter-panel-item-toggle btn{% if sidebar and not feature('v6.5.0.0') %} btn-block{% endif %}"
aria-expanded="false"
{% if sidebar %}
{{ dataBsToggleAttr }}="collapse"
{{ dataBsTargetAttr }}="#{{ filterItemId }}"
{% else %}
{{ dataBsToggleAttr }}="dropdown"
data-boundary="viewport"
{{ dataBsOffsetAttr }}="0,8"
aria-haspopup="true"
{% endif %}>
{% block component_filter_range_display_name %}
{{ displayName }}
{% endblock %}
{% block component_filter_range_toggle_icon %}
{% sw_icon 'arrow-medium-down' style {'pack': 'solid', 'size': 'xs', 'class': 'filter-panel-item-toggle'} %}
{% endblock %}
</button>
{% endblock %}
{% block component_filter_range_dropdown %}
<div class="filter-range-dropdown filter-panel-item-dropdown{% if sidebar %} collapse{% else %} dropdown-menu{% endif %}"
id="{{ filterItemId }}">
{% block component_filter_range_container %}
<div class="filter-range-container">
{% block component_filter_range_min %}
<label class="filter-range-min">
{% block component_filter_range_min_label %}
{{ 'listing.filterRangeMinLabel'|trans|sw_sanitize }}
{% endblock %}
{% block component_filter_range_min_input %}
<input class="form-control min-input"
type="number"
name="{{ minKey }}"
min="{{ minInputValue }}"
max="{{ maxInputValue }}">
{% endblock %}
{% block component_filter_range_min_unit %}
{# @deprecated tag:v6.5.0 - The block `component_filter_range_min_currency_symbol` will be renamed, use block `component_filter_range_min_unit` instead #}
{% block component_filter_range_min_currency_symbol %}
{# @deprecated tag:v6.5.0 - `filter-range-currency-symbol` will be removed, use `filter-range-unit` instead #}
<span class="filter-range-unit filter-range-currency-symbol">
{{ unit }}
</span>
{% endblock %}
{% endblock %}
</label>
{% endblock %}
{% block component_filter_range_divider %}
<div class="filter-range-divider">
–
</div>
{% endblock %}
{% block component_filter_range_max %}
<label class="filter-range-max">
{% block component_filter_range_max_label %}
{{ 'listing.filterRangeMaxLabel'|trans|sw_sanitize }}
{% endblock %}
{% block component_filter_range_max_input %}
<input class="form-control max-input"
type="number"
name="{{ maxKey }}"
min="{{ minInputValue }}"
max="{{ maxInputValue }}">
{% endblock %}
{% block component_filter_range_max_unit %}
{# @deprecated tag:v6.5.0 - The block `component_filter_range_max_currency_symbol` will be renamed, use block `component_filter_range_min_unit` instead #}
{% block component_filter_range_max_currency_symbol %}
{# @deprecated tag:v6.5.0 - `filter-range-currency-symbol` will be removed, use `filter-range-unit` instead #}
<span class="filter-range-unit filter-range-currency-symbol">
{{ unit }}
</span>
{% endblock %}
{% endblock %}
</label>
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}
</div>
{% endblock %}