@props([
    'minId' => 'min',
    'maxId' => 'max',
    'min' => null,
    'max' => null,
    'step' => 1,
    'placeholderMin' => 'Từ',
    'placeholderMax' => 'Đến',
])

<div class="range-filter">
    <div class="range-filter-inputs">
        <label class="sr-only" for="{{ $minId }}">Min</label>
        <input
            type="number"
            id="{{ $minId }}"
            name="{{ $minId }}"
            class="range-min"
            placeholder="{{ $placeholderMin }}"
            @if($min !== null) value="{{ $min }}" @endif
            step="{{ $step }}"
        />

        <span class="range-sep">–</span>

        <label class="sr-only" for="{{ $maxId }}">Max</label>
        <input
            type="number"
            id="{{ $maxId }}"
            name="{{ $maxId }}"
            class="range-max"
            placeholder="{{ $placeholderMax }}"
            @if($max !== null) value="{{ $max }}" @endif
            step="{{ $step }}"
        />
    </div>
</div>
