<div x-data="range({ min: , max:  })" class="relative max-w-xl w-full">
    <div class="mt-4">
        <!-- Range inputs -->
        <input
            type="range"
            aria-label="Min  value"
            step="10"
            :min="min"
            :max="max"
            @input="mintrigger"
            x-model="minval"
            data-filter-type="_min" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <input
            type="range"
            aria-label="Max  value"
            step="10"
            :min="min"
            :max="max"
            @input="maxtrigger"
            x-model="maxval"
            data-filter-type="_max" 
            @change="updateFilters($event)"
            class="absolute pointer-events-none appearance-none z-20 h-2 w-full opacity-0 cursor-pointer"
        >

        <!-- Track -->
        <div class="relative z-10 h-1">
            <div class="absolute inset-0 rounded-md bg-slate-200"></div>
            <div
                class="absolute top-0 bottom-0 rounded-md bg-primary-dark z-20"
                :style="`left: ${minthumb}%; right: ${maxthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`left: ${minthumb}%`"
            ></div>
            <div
                class="absolute z-30 w-4 h-4 top-1/2 -translate-y-1/2 bg-primary-dark rounded-full"
                :style="`right: ${maxthumb}%`"
            ></div>
        </div>
    </div>

    <!-- Value display -->
    <div class="flex items-center pt-5 text-base lg:text-sm">
        
        Da <strong class="ml-1"><span x-text="minval"></span></strong>
        <span class="mx-1">a</span>
        <strong><span x-text="maxval"></span></strong>
        
    </div>
</div>

<script>
    if (typeof window !== 'undefined' && typeof window.formatStorageLabel !== 'function') {
        window.formatStorageLabel = function formatStorageLabel(value, unit = 'GB') {
            const numericValue = typeof value === 'number' ? value : parseFloat(value);
            if (!Number.isFinite(numericValue)) {
                return `${value}${unit}`;
            }

            const normalizedValue = Number.isInteger(numericValue)
                ? numericValue.toString()
                : numericValue.toFixed(1).replace(/\.0$/, '');

            if (numericValue >= 1000) {
                const tbValue = numericValue / 1024;
                const formattedTb = Number.isInteger(tbValue)
                    ? tbValue.toString()
                    : tbValue.toFixed(1).replace(/\.0$/, '');
                return `${formattedTb}tb`;
            }

            return `${normalizedValue}${unit}`;
        };
    }

    function range({ min, max }) {
        
        min = parseInt(min);
        max = parseInt(max);
        
        return {
            min,
            max,
            minval: min,
            maxval: max,
            get minthumb() {
                return ((this.minval - this.min) / (this.max - this.min)) * 100;
            },
            get maxthumb() {
                return 100 - ((this.maxval - this.min) / (this.max - this.min)) * 100;
            },
            mintrigger(e) {
                
                this.minval = Math.min(parseInt(e.target.value), this.maxval - 10);
                
            },
            maxtrigger(e) {
                
                this.maxval = Math.max(parseInt(e.target.value), this.minval + 10);
                
            }
        }
    }
</script>
    