Hi everyone, pleased to share my first tutorial on building next-level custom filters in Glide.
In the video I explain my approach to building custom filters and the techniques I applied. It’s not a step-by-step tutorial and I assume many parts were self-explanatory, hence I’d say I recommend it for experienced Glide builders.
The feature heavily relies on CSS, includes a small Glide stunt in the form of half-styled container and utilizes Maxime Baker’s AI data change listener component.
Everything else beside that should be known to anyone who has built a custom filter before.
If you have questions, post them here!
Hope you enjoy.
Here’s the CSS for the drop-down container:
.filter-drop-down {position: sticky;height: 0px;top: 0;z-index: 9999;opacity: 0;animation: fadeIn 0.1s ease-in forwards;}
.filter-drop-down div > div > div > div:nth-child(2) {margin-top: 20px;z-index: 9999;background-color: #FAFAFA;border-radius: 12px;;padding-left: 24px;padding-right: 24px;box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08),0px 3px 7px rgba(0, 0, 0, 0.11);}
Event listener AI component (originally by Maxime Baker): DataWatcher - Glide custom component