Form - Filters

Component #1

195 courses to get started

                    
                      <!-- Select -->
                      <select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
                            data-hs-select2-options='{
                              "minimumResultsForSearch": "Infinity",
                              "customClass": "custom-select custom-select-sm mb-1",
                              "dropdownAutoWidth": true,
                              "width": "auto"
                            }'>
                        <option value="sort1">Highest rated</option>
                        <option value="sort2">Newest</option>
                        <option value="sort3">Lowest price</option>
                        <option value="sort4">Highest price</option>
                      </select>
                      <!-- End Select -->

                      <!-- Select -->
                      <select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
                            data-hs-select2-options='{
                              "minimumResultsForSearch": "Infinity",
                              "customClass": "custom-select custom-select-sm mb-1",
                              "placeholder": "Type",
                              "dropdownAutoWidth": true,
                              "width": "auto"
                            }'>
                        <option label="empty"></option>
                        <option value="price1" selected>Paid</option>
                        <option value="price2">Free</option>
                      </select>
                      <!-- End Select -->

                      <!-- Select -->
                      <select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
                            data-hs-select2-options='{
                              "minimumResultsForSearch": "Infinity",
                              "customClass": "custom-select custom-select-sm mb-1",
                              "placeholder": "Duration",
                              "dropdownAutoWidth": true,
                              "width": "auto"
                            }'>
                        <option label="empty"></option>
                        <option value="duration1">0-3 Hours</option>
                        <option value="duration2">3-9 Hours</option>
                        <option value="duration3">9-24 Hours</option>
                        <option value="duration4" selected>24+ Hours</option>
                      </select>
                      <!-- End Select -->

                      <!-- Select -->
                      <select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
                            data-hs-select2-options='{
                              "minimumResultsForSearch": "Infinity",
                              "customClass": "custom-select custom-select-sm mb-1",
                              "placeholder": "Skills",
                              "dropdownAutoWidth": true,
                              "width": "auto"
                            }'>
                        <option label="empty"></option>
                        <option value="beginner" selected>Beginner</option>
                        <option value="intermediate">Intermediate</option>
                        <option value="advanced">Advanced</option>
                      </select>
                      <!-- End Select -->
                    
                  
                    
                      <link rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/select2/dist/js/select2.full.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.select2.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF SELECT2
                          // =======================================================
                          $('.js-custom-select').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #2

110 products
                    
                      <div class="container">
                        <!-- Sorting -->
                        <div class="row align-items-center">
                          <div class="col-sm mb-3 mb-sm-0">
                            <span class="font-size-1 ml-1">110 products</span>
                          </div>

                          <div class="col-sm-auto">
                            <div class="d-flex justify-content-sm-end align-items-center">
                              <!-- Select -->
                              <div class="mr-2">
                                <select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
                                      data-hs-select2-options='{
                                        "minimumResultsForSearch": "Infinity",
                                        "customClass": "custom-select custom-select-sm",
                                        "dropdownAutoWidth": true,
                                        "width": "auto"
                                      }'>
                                  <option value="mostRecent" selected>Sort by</option>
                                  <option value="newest">Newest first</option>
                                  <option value="priceHighLow">Price (high - low)</option>
                                  <option value="priceLowHigh">Price (low - high)</option>
                                  <option value="topSellers">Top sellers</option>
                                </select>
                              </div>
                              <!-- End Select -->

                              <!-- Select -->
                              <div class="mr-2">
                                <select class="js-custom-select custom-select-sm" size="1" style="opacity: 0;"
                                      data-hs-select2-options='{
                                        "minimumResultsForSearch": "Infinity",
                                        "customClass": "custom-select custom-select-sm",
                                        "dropdownAutoWidth": true,
                                        "width": "auto"
                                      }'>
                                  <option value="alphabeticalOrderSelect1" selected>A-to-Z</option>
                                  <option value="alphabeticalOrderSelect2">Z-to-A</option>
                                </select>
                              </div>
                              <!-- End Select -->

                              <!-- Nav -->
                              <ul class="nav nav-segment">
                                <li class="list-inline-item">
                                  <a class="nav-link active" href="shop-products-grid.html">
                                    <i class="fas fa-th-large"></i>
                                  </a>
                                </li>
                                <li class="list-inline-item">
                                  <a class="nav-link" href="shop-products-list.html">
                                    <i class="fas fa-list"></i>
                                  </a>
                                </li>
                              </ul>
                              <!-- End Nav -->
                            </div>
                          </div>
                        </div>
                        <!-- End Sorting -->
                      </div>
                    
                  
                    
                      <link rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/select2/dist/js/select2.full.min.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.select2.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INITIALIZATION OF SELECT2
                          // =======================================================
                          $('.js-custom-select').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });
                        });
                      </script>
                    
                  

Component #3

Price
All beds
Property type
                    
                      <!-- Filters Section -->
                      <div class="container space-1">
                        <div class="row mx-n1">
                          <div class="col-lg px-1 mb-2 mb-lg-0">
                            <!-- Input Group -->
                            <label class="sr-only" for="searchPropertySr">Search property</label>
                            <div class="input-group input-group-sm input-group-merge">
                              <div class="input-group-prepend">
                                <span class="input-group-text" id="searchProperty">
                                  <i class="fas fa-search"></i>
                                </span>
                              </div>
                              <input type="text" class="form-control" name="text" id="searchPropertySr" placeholder="Search property" aria-label="Search property" aria-describedby="searchProperty" value="London, England">
                            </div>
                            <!-- End Input Group -->
                          </div>

                          <div class="col-auto px-1 mb-2 mb-lg-0">
                            <!-- Unfold -->
                            <div class="hs-unfold">
                              <a class="js-hs-unfold-invoker-price btn btn-block btn-sm btn-white dropdown-toggle" href="javascript:;"
                                 data-hs-unfold-options='{
                                  "smartPositionOff": true,
                                  "target": "#priceFilterDropdown",
                                  "type": "css-animation",
                                  "animationIn": "slideInUp"
                                 }'>Price
                              </a>

                              <div id="priceFilterDropdown" class="hs-unfold-content dropdown-menu dropdown-card" style="min-width: 21rem; max-width: 21rem;">
                                <!-- Card -->
                                <div class="card">
                                  <div class="card-body">
                                    <!-- Bar Chart -->
                                    <div class="position-relative overflow-hidden" style="height: 6rem; width: 18rem;">
                                      <div class="position-absolute w-100 overflow-hidden">
                                        <div style="height: 6rem; width: 18rem;">
                                          <canvas class="js-chart"
                                                  data-hs-chartjs-options='{
                                                    "type": "bar",
                                                    "data": {
                                                      "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                                                      "datasets": [{
                                                        "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                                                        "backgroundColor": "#e7eaf3",
                                                        "borderColor": "#e7eaf3"
                                                      }]
                                                    },
                                                    "options": {
                                                      "responsive": true,
                                                      "scales": {
                                                        "yAxes": [{
                                                          "display": false,
                                                          "gridLines": {
                                                            "display": false,
                                                            "drawBorder": false
                                                          },
                                                          "ticks": {
                                                            "beginAtZero": true
                                                          }
                                                        }],
                                                        "xAxes": [{
                                                          "display": false,
                                                          "gridLines": {
                                                            "display": false,
                                                            "drawBorder": false
                                                          }
                                                        }]
                                                      },
                                                      "tooltips": {
                                                        "custom": false
                                                      }
                                                    }
                                                  }'></canvas>
                                        </div>
                                      </div>

                                      <div id="foregroundBarChartDoubleResult" class="position-absolute overflow-hidden">
                                        <div style="height: 6rem; width: 18rem;">
                                          <canvas class="js-chart"
                                                  data-hs-chartjs-options='{
                                                    "type": "bar",
                                                    "data": {
                                                      "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                                                      "datasets": [{
                                                        "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                                                        "backgroundColor": "#377dff",
                                                        "borderColor": "#377dff"
                                                      }]
                                                    },
                                                    "options": {
                                                      "scales": {
                                                        "yAxes": [{
                                                          "display": false,
                                                          "gridLines": {
                                                            "display": false,
                                                            "drawBorder": false
                                                          },
                                                          "ticks": {
                                                            "beginAtZero": true
                                                          }
                                                        }],
                                                        "xAxes": [{
                                                          "display": false,
                                                          "gridLines": {
                                                            "display": false,
                                                            "drawBorder": false
                                                          }
                                                        }]
                                                      },
                                                      "tooltips": {
                                                        "custom": false
                                                      }
                                                    }
                                                  }'></canvas>
                                        </div>
                                      </div>
                                    </div>
                                    <!-- End Bar Chart -->

                                    <!-- Range Slider -->
                                    <input class="js-ion-range-slider" type="text" style="opacity: 0;"
                                           data-hs-ion-range-slider-options='{
                                             "type": "double",
                                             "extra_classes": "range-slider-custom",
                                             "min": 0,
                                             "max": 1000,
                                             "from": 250,
                                             "to": 750,
                                             "result_min_target_el": "#rangeSliderExampleDouble4MinResult",
                                             "result_max_target_el": "#rangeSliderExampleDouble4MaxResult",
                                             "foreground_target_el": "#foregroundBarChartDoubleResult"
                                           }'>

                                    <div class="row justify-content-center mt-5">
                                      <div class="col">
                                        <span class="d-block font-size-1 mb-1">Min price:</span>
                                        <input type="text" class="form-control form-control-sm" id="rangeSliderExampleDouble4MinResult">
                                      </div>
                                      <div class="col">
                                        <span class="d-block font-size-1 mb-1">Max price:</span>
                                        <input type="text" class="form-control form-control-sm" id="rangeSliderExampleDouble4MaxResult">
                                      </div>
                                    </div>
                                    <!-- End Range Slider -->
                                  </div>

                                  <div class="card-footer">
                                    <div class="d-flex justify-content-between">
                                      <a class="btn btn-sm btn-white" href="#">Clear</a>
                                      <a class="btn btn-sm btn-primary" href="#">Save</a>
                                    </div>
                                  </div>
                                </div>
                                <!-- End Card -->
                              </div>
                            </div>
                            <!-- End Unfold -->
                          </div>

                          <div class="col-auto px-1 mb-2 mb-lg-0">
                            <!-- Unfold -->
                            <div class="hs-unfold">
                              <a class="js-hs-unfold-invoker btn btn-block btn-sm btn-white dropdown-toggle" href="javascript:;"
                                 data-hs-unfold-options='{
                                  "target": "#bedsFilterDropdown",
                                  "type": "css-animation",
                                  "animationIn": "slideInUp"
                                 }'>All beds
                              </a>

                              <div id="bedsFilterDropdown" class="hs-unfold-content dropdown-menu dropdown-menu-sm-right dropdown-card" style="max-width: 25rem;">
                                <!-- Card -->
                                <div class="card">
                                  <div class="card-body">
                                    <!-- Button Group -->
                                    <div class="btn-group btn-group-toggle btn-group-segment d-flex" data-toggle="buttons">
                                      <label class="btn btn-sm flex-fill active">
                                        <input type="radio" name="options" id="optionStudio" checked> Studio+
                                      </label>
                                      <label class="btn btn-sm flex-fill">
                                        <input type="radio" name="options" id="option1"> 1+
                                      </label>
                                      <label class="btn btn-sm flex-fill">
                                        <input type="radio" name="options" id="option2"> 2+
                                      </label>
                                      <label class="btn btn-sm flex-fill">
                                        <input type="radio" name="options" id="option3"> 3+
                                      </label>
                                      <label class="btn btn-sm flex-fill">
                                        <input type="radio" name="options" id="option4"> 4+
                                      </label>
                                    </div>
                                    <!-- End Button Group -->
                                  </div>
                                </div>
                                <!-- End Card -->
                              </div>
                            </div>
                            <!-- End Unfold -->
                          </div>

                          <div class="col-auto px-1 mb-2 mb-lg-0">
                            <!-- Unfold -->
                            <div class="hs-unfold">
                              <a class="js-hs-unfold-invoker btn btn-block btn-sm btn-white dropdown-toggle" href="javascript:;"
                                 data-hs-unfold-options='{
                                  "target": "#propertyTypeFilterDropdown",
                                  "type": "css-animation",
                                  "animationIn": "slideInUp"
                                 }'>Property type
                              </a>

                              <div id="propertyTypeFilterDropdown" class="hs-unfold-content dropdown-menu dropdown-menu-sm-right dropdown-card" style="min-width: 20rem;">
                                <!-- Card -->
                                <div class="card">
                                  <div class="card-body">
                                    <!-- Checkbox -->
                                    <div class="custom-control custom-checkbox mb-3">
                                      <input type="checkbox" class="custom-control-input" id="propertyHousesChechbox">
                                      <label class="custom-control-label" for="propertyHousesChechbox">
                                        <span class="d-block text-dark">Houses</span>
                                        <small class="d-block">Find a cozy place</small>
                                      </label>
                                    </div>
                                    <!-- End Checkbox -->

                                    <!-- Checkbox -->
                                    <div class="custom-control custom-checkbox mb-3">
                                      <input type="checkbox" class="custom-control-input" id="propertyFlatsChechbox">
                                      <label class="custom-control-label" for="propertyFlatsChechbox">
                                        <span class="d-block text-dark">Flats</span>
                                        <small class="d-block">Flats for sale or to rent</small>
                                      </label>
                                    </div>
                                    <!-- End Checkbox -->

                                    <!-- Checkbox -->
                                    <div class="custom-control custom-checkbox mb-3">
                                      <input type="checkbox" class="custom-control-input" id="propertyMultiFamilyChechbox">
                                      <label class="custom-control-label" for="propertyMultiFamilyChechbox">
                                        <span class="d-block text-dark">Multi-family</span>
                                        <small class="d-block">Multi-family houses or flats</small>
                                      </label>
                                    </div>
                                    <!-- End Checkbox -->

                                    <!-- Checkbox -->
                                    <div class="custom-control custom-checkbox">
                                      <input type="checkbox" class="custom-control-input" id="propertyFarmsLandChechbox">
                                      <label class="custom-control-label" for="propertyFarmsLandChechbox">
                                        <span class="d-block text-dark">Farms/land</span>
                                        <small class="d-block">Own a property for farming</small>
                                      </label>
                                    </div>
                                    <!-- End Checkbox -->
                                  </div>

                                  <div class="card-footer">
                                    <div class="d-flex justify-content-between">
                                      <a class="btn btn-sm btn-white" href="#">Clear</a>
                                      <a class="btn btn-sm btn-primary" href="#">Save</a>
                                    </div>
                                  </div>
                                </div>
                                <!-- End Card -->
                              </div>
                            </div>
                            <!-- End Unfold -->
                          </div>

                          <div class="col-auto px-1 mb-2 mb-lg-0">
                            <a class="btn btn-sm btn-white" href="javascript:;" data-toggle="modal" data-target="#RealEstateMoreFiltersModal">
                              <i class="fas fa-sliders-h dropdown-item-icon"></i> More
                            </a>
                          </div>
                        </div>
                      </div>
                      <!-- End Filters Section -->

                      <!-- Real Estate More Filters Modal -->
                      <div class="modal fade" id="RealEstateMoreFiltersModal" tabindex="-1" role="dialog" aria-hidden="true" aria-labelledby="RealEstateMoreFiltersModalTitle">
                        <div class="modal-dialog modal-dialog-centered" role="document">
                          <div class="modal-content">
                            <!-- Header -->
                            <div class="modal-header">
                              <h4 id="RealEstateMoreFiltersModalTitle" class="modal-title">More filters</h4>
                              <div class="modal-close">
                                <button type="button" class="btn btn-icon btn-xs btn-ghost-secondary" data-dismiss="modal" aria-label="Close">
                                  <svg width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
                                    <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
                                  </svg>
                                </button>
                              </div>
                            </div>
                            <!-- End Header -->

                            <!-- Body -->
                            <div class="modal-body">
                              <label class="input-label">Status</label>

                              <!-- Button Group -->
                              <div id="statusLabel" class="btn-group btn-group-toggle btn-group-segment d-flex form-group" data-toggle="buttons">
                                <label class="btn btn-sm flex-fill active">
                                  <input type="radio" name="options" id="optionBuy" checked>Buy
                                </label>
                                <label class="btn btn-sm flex-fill">
                                  <input type="radio" name="options" id="optionRent">Rent
                                </label>
                                <label class="btn btn-sm flex-fill">
                                  <input type="radio" name="options" id="optionSold">Sold
                                </label>
                              </div>
                              <!-- End Button Group -->

                              <!-- Form Group -->
                              <div class="form-group">
                                <!-- Select -->
                                <label for="featuresLabel" class="input-label">Features</label>

                                <select id="featuresLabel" class="js-custom-select" multiple
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm",
                                          "placeholder": "Select features"
                                        }'>
                                  <option label="empty"></option>
                                  <option value="Pets allowed">Pets allowed</option>
                                  <option value="Parking lot">Parking lot</option>
                                  <option value="Balcony">Balcony</option>
                                  <option value="Garden">Garden</option>
                                  <option value="Laundry">Laundry</option>
                                  <option value="Heating">Heating</option>
                                  <option value="AC">AC</option>
                                </select>
                                <!-- End Select -->
                              </div>
                              <!-- End Form Group -->

                              <div class="row mx-n2">
                                <div class="col-6 px-2">
                                  <!-- Form Group -->
                                  <div class="form-group">
                                    <label for="bedsLabel" class="input-label">Beds</label>

                                    <!-- Select -->
                                    <select id="bedsLabel" class="js-custom-select"
                                            data-hs-select2-options='{
                                              "minimumResultsForSearch": "Infinity",
                                              "customClass": "custom-select custom-select-sm"
                                            }'>
                                      <option value="bedValueAny" selected>Any</option>
                                      <option value="bedValueMin1">1</option>
                                      <option value="bedValueMin2">2</option>
                                      <option value="bedValueMin3">3</option>
                                      <option value="bedValueMin4">4</option>
                                      <option value="bedValueMin5">5</option>
                                    </select>
                                    <!-- End Select -->
                                  </div>
                                  <!-- End Form Group -->
                                </div>

                                <div class="col-6 px-2">
                                  <!-- Form Group -->
                                  <div class="form-group">
                                    <!-- Select -->
                                    <label for="bathLabel" class="input-label">Baths</label>

                                    <select id="bathLabel" class="js-custom-select"
                                            data-hs-select2-options='{
                                              "minimumResultsForSearch": "Infinity",
                                              "customClass": "custom-select custom-select-sm"
                                            }'>
                                      <option value="bedValueAny" selected>Any</option>
                                      <option value="bedValueMax1">1</option>
                                      <option value="bedValueMax2">2</option>
                                      <option value="bedValueMax3">3</option>
                                      <option value="bedValueMax4">4</option>
                                      <option value="bedValueMax5">5</option>
                                    </select>
                                    <!-- End Select -->
                                  </div>
                                  <!-- End Form Group -->
                                </div>
                              </div>
                              <!-- End Row -->

                              <label for="squareFeetLabel" class="input-label">Square feet</label>

                              <div class="row mx-n2">
                                <div class="col-6 px-2">
                                  <!-- Form Group -->
                                  <div class="form-group">
                                    <input type="text" class="form-control form-control-sm" id="squareFeetLabel" placeholder="No min">
                                  </div>
                                  <!-- End Form Group -->
                                </div>

                                <div class="col-6 px-2">
                                  <!-- Form Group -->
                                  <div class="form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="No max">
                                  </div>
                                  <!-- End Form Group -->
                                </div>
                              </div>
                              <!-- End Row -->

                              <!-- Form Group -->
                              <div class="form-group">
                                <!-- Select -->
                                <label for="lotSizeLabel" class="input-label">Lot size</label>

                                <select id="lotSizeLabel" class="js-custom-select"
                                        data-hs-select2-options='{
                                          "minimumResultsForSearch": "Infinity",
                                          "customClass": "custom-select custom-select-sm"
                                        }'>
                                  <option value="No Min">No Min</option>
                                  <option value="2000+ sqft">2000+ sqft</option>
                                  <option value="3000+ sqft">3000+ sqft</option>
                                  <option value="4000+ sqft">4000+ sqft</option>
                                  <option value="5000+ sqft">5000+ sqft</option>
                                  <option value="7500+ sqft">7500+ sqft</option>
                                  <option value="0.25+ acre / 10890+ sqft">0.25+ acre / 10890+ sqft</option>
                                  <option value="0.5+ acre / 21780+ sqft">0.5+ acre / 21780+ sqft</option>
                                  <option value="1+ acre">1+ acre</option>
                                  <option value="2+ acre">2+ acre</option>
                                  <option value="5+ acre">5+ acre</option>
                                  <option value="10+ acre">10+ acre</option>
                                </select>
                                <!-- End Select -->
                              </div>
                              <!-- End Form Group -->

                              <label for="yearBuiltLabel" class="input-label">Year built</label>

                              <div class="row mx-n2">
                                <div class="col-6 px-2">
                                  <!-- Form Group -->
                                  <div class="form-group">
                                    <input type="text" class="form-control form-control-sm" id="yearBuiltLabel" placeholder="Min year">
                                  </div>
                                  <!-- End Form Group -->
                                </div>

                                <div class="col-6 px-2">
                                  <!-- Form Group -->
                                  <div class="form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="Max year">
                                  </div>
                                  <!-- End Form Group -->
                                </div>
                              </div>
                              <!-- End Row -->
                            </div>
                            <!-- End Body -->

                            <div class="modal-footer">
                              <button type="button" class="btn btn-sm btn-white mr-2" data-dismiss="modal">Clear all</button>
                              <button type="button" class="btn btn-sm btn-primary">Show 100+ Homes</button>
                            </div>
                          </div>
                        </div>
                      </div>
                      <!-- End Real Estate More Filters Modal -->
                    
                  
                    
                      <link rel="stylesheet" href="./node_modules/ion-rangeslider/css/ion.rangeSlider.css">
                      <link rel="stylesheet" href="./node_modules/chart.js/dist/Chart.min.css">
                      <link rel="stylesheet" href="./node_modules/select2/dist/css/select2.min.css">
                    
                  
                    
                      <!-- JS Implementing Plugins -->
                      <script src="./node_modules/select2/dist/js/select2.full.min.js"></script>
                      <script src="./assets/vendor/hs-unfold/dist/hs-unfold.min.js"></script>
                      <script src="./node_modules/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
                      <script src="./node_modules/chart.js/dist/Chart.min.js"></script>
                      <script src="./assets/vendor/chart.js.extensions/chartjs-extensions.js"></script>

                      <!-- JS Front -->
                      <script src="./assets/js/hs.select2.js"></script>
                      <script src="./assets/js/hs.ion-range-slider.js"></script>
                      <script src="./assets/js/hs.chartjs.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // INIT FLAGS
                          var rangeReady = false

                          // INITIALIZATION OF UNFOLD
                          // =======================================================
                          var unfold = new HSUnfold('.js-hs-unfold-invoker').init();


                          new HSUnfold('.js-hs-unfold-invoker-price', {
                            afterOpen() {
                              if (!rangeReady) {
                                // INITIALIZATION OF ION RANGE SLIDER
                                // =======================================================
                                $('.js-ion-range-slider').each(function () {
                                  var ionRangeSlider = $.HSCore.components.HSIonRangeSlider.init($(this));
                                });

                                rangeReady = true
                              }
                            }
                          }).init();


                          // INITIALIZATION OF SELECT2
                          // =======================================================
                          $('.js-custom-select').each(function () {
                            var select2 = $.HSCore.components.HSSelect2.init($(this));
                          });


                          // INITIALIZATION OF CHARTJS
                          // =======================================================
                          $('.js-chart').each(function () {
                            var chart = $.HSCore.components.HSChartJS.init($(this));
                          });
                        });
                      </script>