templates/home/components/_range_price.html.twig line 1

{% set priceLimits = qi.priceLimits|default([]) %}

<div class="price-range">

    <div class="values">
        <span>Mín: $<strong id="minValue"></strong></span>
        <span>Máx: $<strong id="maxValue"></strong></span>
    </div>

    <div class="slider">
        <div class="track"></div>
        <div class="range" id="rangeHighlight"></div>

        <input
            type="range"
            id="minRange"
            min="{{ priceLimits.minPrice|default(0) }}"
            max="{{ priceLimits.maxPrice|default(1000) }}"
            step="10"
            value="{{ params.min|default(priceLimits.minPrice|default(0)) }}"/>

        <input
            type="range"
            id="maxRange"
            min="{{ priceLimits.minPrice|default(0) }}"
            max="{{ priceLimits.maxPrice|default(1000) }}"
            step="10"
            value="{{ params.max|default(priceLimits.maxPrice|default(1000)) }}"/>
    </div>

    <button id="cleanBtn">Limpiar</button>
    <button id="filterBtn">Filtrar</button>
    
</div>

<script>
    const minRange = document.getElementById('minRange');
    const maxRange = document.getElementById('maxRange');
    const minValue = document.getElementById('minValue');
    const maxValue = document.getElementById('maxValue');
    const filterBtn = document.getElementById('filterBtn');
    const cleanBtn = document.getElementById('cleanBtn');
    const rangeHighlight = document.getElementById('rangeHighlight');
    const minGap = Math.max(1, Math.floor((maxRange.max - minRange.min) * 0.02));

    function updateSlider() {
        let min = parseInt(minRange.value);
        let max = parseInt(maxRange.value);

        if (max - min < minGap) {
            if (this === minRange) {
                minRange.value = max - minGap;
            } else {
                maxRange.value = min + minGap;
            }
        }

        min = minRange.value;
        max = maxRange.value;

        minValue.textContent = min;
        maxValue.textContent = max;

        const percentMin = (min / minRange.max) * 100;
        const percentMax = (max / maxRange.max) * 100;

        rangeHighlight.style.left = percentMin + '%';
        rangeHighlight.style.width = (percentMax - percentMin) + '%';
    }

    minRange.addEventListener('input', updateSlider);
    maxRange.addEventListener('input', updateSlider);

    updateSlider();

    filterBtn?.addEventListener('click', function () {
        const min = parseInt(minRange.value);
        const max = parseInt(maxRange.value);
        const url = new URL(window.location.href);

        url.searchParams.set('min', min);
        url.searchParams.set('max', max);
        window.location.href = url.toString();
    });

    cleanBtn?.addEventListener('click', function () {
        window.location.href = window.location.pathname;
    });
</script>