{namespace filter=Newland\NeosFiltering\ViewHelpers}

<h3 class="mb-4 mt-0 text-lg">{title}</h3>

<ul class="list-reset mb-4">
    <li>
        <div class="mb-2 flex justify-between items-center whitespace-no-wrap">
            <div class="flex-none">
                <span class="text-grey-dark">
                    <span id="{id}__output-min">{min * factor}</span>
                    -
                    <span id="{id}__output-max">{max * factor}</span>
                {unit}
                </span>
            </div>
        </div>
        <div class="mt-2 mx-2">
            <div
                data-toubiz-range-slider
                data-toubiz-range-slider-input.min="#{id}__min"
                data-toubiz-range-slider-input.max="#{id}__max"
                data-toubiz-range-slider-outputs.min="#{id}__output-min"
                data-toubiz-range-slider-outputs.max="#{id}__output-max"
                data-toubiz-range-slider-factor="{factor}"
                data-toubiz-range-slider-step="{step}">

            </div>
        </div>
        <div class="hidden">
            <input
                type="number"
                name="{queryString}[min]"
                id="{id}__min"
                placeholder="{min}"
                data-id="{id}"
                min="{min}"
                max="{max}"
                step="{step}"
                {filter:ifNull(value: state.min, else: 'value="{state.min}"')} />

            <input
                type="number"
                name="{queryString}[max]"
                id="{id}__max"
                placeholder="{max}"
                data-id="{id}"
                min="{min}"
                max="{max}"
                step="{step}"
                {filter:ifNull(value: state.max, else: 'value="{state.max}"')} />

        </div>
    </li>
</ul>