<div class="layer-navigation" data-js-collection-nav-section="filter_by_price" data-js-accordion="all">
    <div class="layer-navigation__head py-10 cursor-pointer open" data-js-accordion-button>
        <h5 class="d-flex text-uppercase align-items-center mb-0">
            {{ __('Price') }}
            <i class="layer-navigation__arrow">
                <svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-theme-229" viewBox="0 0 24 24">
                    <path d="M11.783 14.088l-3.75-3.75a.652.652 0 0 1-.176-.449c0-.169.059-.319.176-.449a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176l3.301 3.32 3.301-3.32a.65.65 0 0 1 .449-.176c.169 0 .318.059.449.176.117.13.176.28.176.449a.652.652 0 0 1-.176.449l-3.75 3.75a.877.877 0 0 1-.215.127.596.596 0 0 1-.468 0 .841.841 0 0 1-.215-.127z" />
                </svg>
            </i>
        </h5>
    </div>
    <div class="layer-navigation__accordion" data-js-accordion-content>
        <div class="pt-2 pb-10">
            <div class="collection-filter-by-price">
                <input type="hidden" class="js-range-of-price" name="filter_by_price" data-min="0" data-max="10000" data-step="10">
            </div>
            <script>
                Loader.require({
                    type: "style",
                    name: "plugin_ion_range_slider"
                });

                Loader.require({
                    type: "script",
                    name: "plugin_ion_range_slider"
                });

                Loader.require({
                    type: "script",
                    name: "range_of_price"
                });
            </script>
        </div>
    </div>
    <div class="border-bottom"></div>
</div>
