Finder v2.0.0
Buy now
Finder component

Filter widgets

Filter widgets for the sidebar, allowing users to refine listings based on various attributes like price, brand, type, etc.

Several filter components utilize third-party plugins for enhanced functionality:

  • The range slider is powered by the noUISlider plugin.
  • The search bar integrates with the List.js plugin.
  • The custom scrollbar is implemented using the SimpleBar plugin.

Ensure that you include the necessary references to the plugin's CSS and JavaScript files.

CSS files are linked in the <head> section and above theme.min.css reference in your document:

<link rel="stylesheet" href="assets/vendor/nouislider/dist/nouislider.min.css">
<link rel="stylesheet" href="assets/vendor/simplebar/dist/simplebar.min.css">

JavaScript files are linked before the closing </body> tag and above theme.min.js reference in your document:

<script src="assets/vendor/nouislider/dist/nouislider.min.js"></script>
<script src="assets/vendor/list.js/dist/list.min.js"></script>
<script src="assets/vendor/simplebar/dist/simplebar.min.js"></script>

Checkboxes

Project type

<!-- List of checkbox based filter items with quick search and custom scrollbar -->
<h4 class="h6">Project type</h4>
<div data-filter-list='{"searchClass": "project-search", "listClass": "project-list", "valueNames": ["form-check-label"]}'>
  <div class="position-relative mb-3">
    <i class="fi-search position-absolute top-50 start-0 translate-middle-y ms-3"></i>
    <input type="search" class="project-search form-control form-icon-start" placeholder="Search">
  </div>
  <div style="height: 215px" data-simplebar data-simplebar-auto-hide="false">
    <div class="project-list d-flex flex-column gap-2">
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="bathtub-repair" checked>
        <label for="bathtub-repair" class="form-check-label">
          Bathtub repair
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="door-repair">
        <label for="door-repair" class="form-check-label">
          Door repair
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="locksmith">
        <label for="locksmith" class="form-check-label">
          Locksmith
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="small-appliance-repair" checked>
        <label for="small-appliance-repair" class="form-check-label">
          Small appliance repair
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="smoke-detector-installation">
        <label for="smoke-detector-installation" class="form-check-label">
          Smoke detector installation
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="electrical-work">
        <label for="electrical-work" class="form-check-label">
          Electrical work
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="plumbing">
        <label for="plumbing" class="form-check-label">
          Plumbing
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="hvac-maintenance">
        <label for="hvac-maintenance" class="form-check-label">
          HVAC maintenance
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="painting">
        <label for="painting" class="form-check-label">
          Painting
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="roofing">
        <label for="roofing" class="form-check-label">
          Roofing
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="flooring-installation">
        <label for="flooring-installation" class="form-check-label">
          Flooring installation
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="carpentry">
        <label for="carpentry" class="form-check-label">
          Carpentry
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="landscaping">
        <label for="landscaping" class="form-check-label">
          Landscaping
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="window-installation">
        <label for="window-installation" class="form-check-label">
          Window installation
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="home-security-systems">
        <label for="home-security-systems" class="form-check-label">
          Home security systems
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="drywall-repair">
        <label for="drywall-repair" class="form-check-label">
          Drywall repair
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="gutter-cleaning">
        <label for="gutter-cleaning" class="form-check-label">
          Gutter cleaning
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="insulation-installation">
        <label for="insulation-installation" class="form-check-label">
          Insulation installation
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="kitchen-remodeling">
        <label for="kitchen-remodeling" class="form-check-label">
          Kitchen remodeling
        </label>
      </div>
      <div class="form-check mb-0">
        <input type="checkbox" class="form-check-input" id="bathroom-remodeling">
        <label for="bathroom-remodeling" class="form-check-label">
          Bathroom remodeling
        </label>
      </div>
    </div>
  </div>
</div>

Button toggles

Color

Fuel type

<!-- Scrollable list of color filters based on "btn-check" and "btn-color" -->
<h4 class="h6">Color</h4>
<div style="height: 220px" data-simplebar data-simplebar-auto-hide="false">
  <div class="d-flex flex-column gap-2">
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="amber" checked>
      <label for="amber" class="btn btn-color fs-xl" style="color: #ffbf00"></label>
      <label for="amber" class="fs-sm ms-2">Amber</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="azure">
      <label for="azure" class="btn btn-color fs-xl" style="color: #0080FF"></label>
      <label for="azure" class="fs-sm ms-2">Azure</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="beige" checked>
      <label for="beige" class="btn btn-color fs-xl" style="color: #f5e2c4"></label>
      <label for="beige" class="fs-sm ms-2">Beige</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="black">
      <label for="black" class="btn btn-color fs-xl" style="color: #333d4c"></label>
      <label for="black" class="fs-sm ms-2">Black</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="blue">
      <label for="blue" class="btn btn-color fs-xl" style="color: #5656f3"></label>
      <label for="blue" class="fs-sm ms-2">Blue</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="brown">
      <label for="brown" class="btn btn-color fs-xl" style="color: #9d542a"></label>
      <label for="brown" class="fs-sm ms-2">Brown</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="burgundy">
      <label for="burgundy" class="btn btn-color fs-xl" style="color: #800020"></label>
      <label for="burgundy" class="fs-sm ms-2">Burgundy</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="dark-blue">
      <label for="dark-blue" class="btn btn-color fs-xl" style="color: #23238f"></label>
      <label for="dark-blue" class="fs-sm ms-2">Dark Blue</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="dark-green">
      <label for="dark-green" class="btn btn-color fs-xl" style="color: #136930"></label>
      <label for="dark-green" class="fs-sm ms-2">Dark Green</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="gray">
      <label for="gray" class="btn btn-color fs-xl" style="color: #808080"></label>
      <label for="gray" class="fs-sm ms-2">Gray</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="green">
      <label for="green" class="btn btn-color fs-xl" style="color: #239062"></label>
      <label for="green" class="fs-sm ms-2">Green</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="light-blue">
      <label for="light-blue" class="btn btn-color fs-xl" style="color: #add8e6"></label>
      <label for="light-blue" class="fs-sm ms-2">Light Blue</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="light-gray">
      <label for="light-gray" class="btn btn-color fs-xl" style="color: #d3d3d3"></label>
      <label for="light-gray" class="fs-sm ms-2">Light Gray</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="maroon">
      <label for="maroon" class="btn btn-color fs-xl" style="color: #800000"></label>
      <label for="maroon" class="fs-sm ms-2">Maroon</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="orange">
      <label for="orange" class="btn btn-color fs-xl" style="color: #ffa500"></label>
      <label for="orange" class="fs-sm ms-2">Orange</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="red">
      <label for="red" class="btn btn-color fs-xl" style="color: #ff0000"></label>
      <label for="red" class="fs-sm ms-2">Red</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="silver">
      <label for="silver" class="btn btn-color fs-xl" style="color: #c0c0c0"></label>
      <label for="silver" class="fs-sm ms-2">Silver</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="white">
      <label for="white" class="btn btn-color fs-xl" style="color: #eef1f6"></label>
      <label for="white" class="fs-sm ms-2">White</label>
    </div>
    <div class="d-flex align-items-center mb-1">
      <input type="checkbox" class="btn-check" id="yellow">
      <label for="yellow" class="btn btn-color fs-xl" style="color: #F4E134"></label>
      <label for="yellow" class="fs-sm ms-2">Yellow</label>
    </div>
  </div>
</div>

<!-- List of fuel type filters based on "btn-check" -->
<h4 class="h6">Fuel type</h4>
<div class="d-flex flex-wrap gap-2">
  <input type="checkbox" class="btn-check" id="fuel-gasoline">
  <label for="fuel-gasoline" class="btn btn-sm btn-outline-secondary">Gasoline</label>
  <input type="checkbox" class="btn-check" id="fuel-diesel" checked>
  <label for="fuel-diesel" class="btn btn-sm btn-outline-secondary">Diesel</label>
  <input type="checkbox" class="btn-check" id="fuel-electric">
  <label for="fuel-electric" class="btn btn-sm btn-outline-secondary">Electric</label>
  <input type="checkbox" class="btn-check" id="fuel-hybrid">
  <label for="fuel-hybrid" class="btn btn-sm btn-outline-secondary">Hybrid</label>
  <input type="checkbox" class="btn-check" id="fuel-hydrogen">
  <label for="fuel-hydrogen" class="btn btn-sm btn-outline-secondary">Hydrogen</label>
  <input type="checkbox" class="btn-check" id="fuel-plugin">
  <label for="fuel-plugin" class="btn btn-sm btn-outline-secondary">Plug-in Hybrid</label>
</div>

Range slider

Price

<!-- Price range slider example -->
<h4 class="h6 pb-2" id="headingPrice">Price</h4>
<div class="range-slider" data-range-slider='{"startMin": 250, "startMax": 700, "min": 0, "max": 1000, "step": 10, "tooltipPrefix": "$"}' aria-labelledby="headingPrice">
  <div class="range-slider-ui"></div>
  <div class="d-flex align-items-center">
    <div class="position-relative w-50">
      <i class="fi-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
      <input type="number" class="form-control form-icon-start" min="0" max="990" step="10" data-range-slider-min>
    </div>
    <i class="fi-minus text-body-emphasis mx-2"></i>
    <div class="position-relative w-50">
      <i class="fi-dollar-sign position-absolute top-50 start-0 translate-middle-y ms-3"></i>
      <input type="number" class="form-control form-icon-start" min="0" max="1000" step="10" data-range-slider-max>
    </div>
  </div>
</div>

Selected filters

Filter

<!-- Selected filters made of buttons  -->
<div class="d-flex align-items-center justify-content-between mb-3">
  <h4 class="h6 mb-0">Filter</h4>
  <button type="button" class="btn btn-sm btn-secondary bg-transparent border-0 text-decoration-underline p-0 ms-2">
    Clear all
  </button>
</div>
<div class="d-flex flex-wrap gap-2">
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="fi-close fs-sm ms-n1 me-1"></i>
    Year 2019
  </button>
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="fi-close fs-sm ms-n1 me-1"></i>
    Sedan
  </button>
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="fi-close fs-sm ms-n1 me-1"></i>
    SUV
  </button>
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="fi-close fs-sm ms-n1 me-1"></i>
    Lincoln
  </button>
  <button type="button" class="btn btn-sm btn-secondary">
    <i class="fi-close fs-sm ms-n1 me-1"></i>
    Below $25,000
  </button>
</div>
Top