<div class="search" id="search_area">

    <svg viewBox="0 0 39 66" class="es">
        <path d="M0 54.0313C0 48.8124 4.33379 45.8518 9.21884 45.8518C10.0447 45.8518 10.9389 45.917 11.7648 46.1244C5.57136 48.7356 5.70791 64.8341 15.4092 65.7961C4.53811 65.7961 0 60.0174 0 54.0313Z" />
        <path d="M38.9997 50.1117C38.9997 60.4346 29.923 65.7961 20.7047 65.7961C24.3517 65.7961 29.9943 60.9798 28.5438 52.1099C26.8268 42.133 1.92969 36.4994 1.92969 24.2521C1.92969 16.413 8.73609 12.2122 17.9514 12.2122C13.7592 12.2122 11.0742 16.5495 11.764 21.3658C13.4163 31.8875 38.9997 37.0446 38.9997 50.1117Z" />
        <path d="M22.1465 12.2128C32.878 12.6983 37.4192 18.1306 37.4192 23.1517C37.4192 29.6172 32.3981 30.5144 29.5031 30.5144C28.2686 30.5144 27.4483 30.3753 27.4483 30.3753C32.3273 27.8966 31.9839 14.0749 22.1465 12.2128Z" />
        <path d="M9.60113 8.20416C9.60113 8.20416 8.89358 7.55579 8.0945 6.57564C6.22372 4.28762 4.08591 0.287636 12.1354 0.00947271C18.3845 -0.203449 28.0889 3.15626 35.6321 11.623C26.9519 3.92045 9.52071 4.23452 9.60113 8.20416Z" />
    </svg>

    <div class="search__field">
        <h2><strong>Znajdź</strong> mieszkanie dla siebie</h2>
        <p><i class="fa-solid fa-circle-info"></i> Skorzystaj z tabeli lub wybierz piętro powyżej</p>

        <div class="search__fields">
            <div class="search__col search--col1">
                <label>Wybierz budynek</label>
                <select id="search_building">
                    <option value="">Wszystkie</option>
                    <option value="A">Budynek A</option>
                    <option value="B">Budynek B</option>
                </select>
            </div>
            <div class="search__col search--col2">
                <label>Wybierz piętro</label>
                <select id="search_level">
                    <option value="">Wszystkie</option>
                    <option value="parter">Parter</option>
                    <option value="1">Piętro 1</option>
                    <option value="2">Piętro 2</option>
                    <option value="3">Piętro 3</option>
                </select>
            </div>
            <div class="search__col search--col3">
                <label>Ilość pokoi</label>
                <select id="search_room">
                    <option value="">Wszystkie</option>
                    <option value="2">2 pokoje</option>
                    <option value="3">3 pokoje</option>
                    <option value="4">4 pokoje</option>
                </select>
            </div>
            <div class="search__col search--col4">
                <label>Status mieszkania</label>
                <select id="search_status">
                    <option value="">Wszystkie</option>
                    <option value="wolne">Wolne</option>
                    <option value="zarezerwowane">Zarezerwowane</option>
                    <option value="sprzedane">Sprzedane</option>
                </select>
            </div>
            <div class="search__col search--col5">
                <label>Metraż</label>
                <div class="range_container">
                    <div class="form_control">
                        <input class="form_control__input" type="text" id="fromInput" readonly value="38" min="38" max="90" />

                        <span class="form_control__unit">m<sup>2</sup></span>

                        <span class="form_control__separator">-</span>

                        <input class="form_control__input" type="text" id="toInput" readonly value="90" min="38" max="90" />

                        <span class="form_control__unit">m<sup>2</sup></span>
                    </div>

                    <div class="sliders_control">
                        <input id="fromSlider" type="range" value="38" min="38" max="90" />
                        <input id="toSlider" type="range" value="90" min="38" max="90" />
                    </div>
                </div>
            </div>
            <div class="search__col search--col6">
                <a class="button button2" id="search_button" href="javascript:void(0)">
                    <span class="search__desktopname">Wyszukaj mieszkanie</span>
                    <span class="search__mobilename">Wyszukaj</span>
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        const fromSlider = document.querySelector('#fromSlider');
        const toSlider = document.querySelector('#toSlider');
        const fromInput = document.querySelector('#fromInput');
        const toInput = document.querySelector('#toInput');
        fillSlider(fromSlider, toSlider, '#ededed', '#ededed', toSlider);

        fromSlider.oninput = () => controlFromSlider(fromSlider, toSlider, fromInput);
        toSlider.oninput = () => controlToSlider(fromSlider, toSlider, toInput);
    });
</script>