Property Listing Filter

<dialog class="js-filter-dialog property-listing-filter">
    <form class="property-listing-filter__form">
        <div class="property-listing-filter__header">
            Filters <a href="#" class="js-close property-listing-filter__close-button"><span>Close</span></a>
        </div>
        <div class="property-listing-filter__form-inner">
            <fieldset class="property-listing-filter__property-types">
                <legend class="property-listing-filter__filter-title">Property Type</legend>
                <div class="js-property-types"></div>
            </fieldset>
            <fieldset class="property-listing-filter__size">
                <legend class="property-listing-filter__filter-title">Square Footage</legend>
                <div class="js-size" data-type="squareFootageValue">
                    <div class="slider__range-container slider__range-container--with-bars js-slider-container">
                        <div class="slider__range-tracker"></div>
                        <div class="slider__range-tracker-between js-tracker-between"></div>
                        <label for="range-lower-size"></label><input data-key="size" class="slider__range-lower js-range-lower js-min-size" type="range" min="0" max="20000" value="0" name="min-size" id="range-lower-size">
                        <label for="range-upper-size"></label><input class="slider__range-upper js-range-upper js-max-size" type="range" min="0" max="20000" value="20000" name="max-size" id="range-upper-size">
                    </div>
                    <div class="slider__min-max-container">
                        <div class="slider__min-text js-min">0</div>
                        <div class="slider__max-text js-max"></div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="property-listing-filter__locations">
                <legend class="property-listing-filter__filter-title">Location</legend>
                <div class="property-listing-filter__checkbox-container">
                    <label class="property-listing-filter__checkbox-label">
                        <input data-key="location" type="checkbox" value="West Bay" name="location"><span class="property-listing-filter__checkbox-text">West Bay</span>
                    </label>
                </div>
                <div class="property-listing-filter__checkbox-container">
                    <label class="property-listing-filter__checkbox-label">
                        <input type="checkbox" value="Camana Bay" name="location"><span class="property-listing-filter__checkbox-text">Camana Bay</span>
                    </label>
                </div>
                <div class="property-listing-filter__checkbox-container">
                    <label class="property-listing-filter__checkbox-label">
                        <input type="checkbox" value="George Town" name="location"><span class="property-listing-filter__checkbox-text">George Town</span>
                    </label>
                </div>
            </fieldset>
            <fieldset class="property-listing-filter__building-type">
                <legend class="property-listing-filter__filter-title">Buildings</legend>
                <div class="js-building-type"></div>
            </fieldset>
            <fieldset class="property-listing-filter__price">
                <legend class="property-listing-filter__filter-title">Price</legend>
                <div class="js-price" data-type="priceValue">
                    <div class="slider__range-container slider__range-container--with-bars js-slider-container">
                        <div class="slider__range-tracker"></div>
                        <div class="slider__range-tracker-between js-tracker-between"></div>
                        <label for="range-lower-price"></label><input data-key="price" class="slider__range-lower js-range-lower js-min-price" type="range" min="0" max="5000000" value="0" name="min-price" id="range-lower-price">
                        <label for="range-upper-price"></label><input class="slider__range-upper js-range-upper js-max-price" type="range" min="0" max="5000000" value="5000000" name="max-price" id="range-upper-price">
                    </div>
                    <div class="slider__min-max-container">
                        <div class="slider__min-text"><span>&#36;</span><span class="js-min">0</span></div>
                        <div class="slider__max-text"><span>&#36;</span><span class="js-max"></span></div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="property-listing-filter__bedrooms">
                <legend class="property-listing-filter__filter-title">Bedrooms</legend>
                <div class="js-bedrooms">
                    <div class="slider__range-container js-slider-container">
                        <div class="slider__range-tracker"></div>
                        <div class="slider__range-tracker-between js-tracker-between"></div>
                        <label for="range-lower-bedrooms"></label><input data-key="bedrooms" class="slider__range-lower js-range-lower js-min-bedrooms" type="range" min="0" max="100000000" value="0" name="min-bedrooms" id="range-lower-bedrooms">
                        <label for="range-upper-bedrooms"></label><input class="slider__range-upper js-range-upper js-max-bedrooms" type="range" min="0" max="100000000" value="100000000" name="max-bedrooms" id="range-upper-bedrooms">
                    </div>
                    <div class="slider__min-max-container">
                        <div class="slider__min-text js-min">0</div>
                        <div class="slider__max-text js-max"></div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="property-listing-filter__bathrooms">
                <legend class="property-listing-filter__filter-title">Bathrooms</legend>
                <div class="js-bathrooms">
                    <div class="slider__range-container js-slider-container">
                        <div class="slider__range-tracker"></div>
                        <div class="slider__range-tracker-between js-tracker-between"></div>
                        <label for="range-lower-bathrooms"></label><input data-key="bathrooms" class="slider__range-lower js-range-lower js-min-bathrooms" type="range" min="0" max="100000000" value="0" name="min-bathrooms" id="range-lower-bathrooms">
                        <label for="range-upper-bathrooms"></label><input class="slider__range-upper js-range-upper js-max-bathrooms" type="range" min="0" max="100000000" value="100000000" name="max-bathrooms" id="range-upper-bathrooms">
                    </div>
                    <div class="slider__min-max-container">
                        <div class="slider__min-text js-min">0</div>
                        <div class="slider__max-text js-max"></div>
                    </div>
                </div>
            </fieldset>
            <fieldset class="property-listing-filter__amenities">
                <legend class="property-listing-filter__filter-title">Amenities</legend>
                <div class="js-amenities"></div>
                <div class="js-amenities-toggle">
                    <span class="property-listing-filter__amenities-show">Show more</span>
                    <span class="property-listing-filter__amenities-hide">Show less</span>
                </div>
            </fieldset>
        </div>
        <div class="property-listing-filter__footer">
            <input type="reset" />
            <input type="submit" value="Show Properties" />
        </div>
    </form>
</dialog>