WF Weekly - Episode 19

Unlock the power of Webflow's new code components to build a dynamic, custom CMS filter with search and range sliders.

Julian Galluzzo & Duncan Hamra·Contributors

|

October 16, 2025·1 min read

Introduction to Code Components:

__wf_reserved_inherit — "Unlock the power of Webflow's new code components to build a dynamic, custom CMS filter with search and range sliders. In this tutorial, you'll learn how to make code components interact with your Webflow site, allowing for advanced functionality that goes beyond native capabilities. Follow along as we build a fully functional menu filter with real-time search and range sliders for price and calories."

Setting up Data Attributes:

__wf_reserved_inherit — "And now I'm going to go to Claude Code and I'm going to explain to it what I'm trying to do. So, what I want to do here, my goal for the end of this, I want to have a search."

Building the Filter Component:

__wf_reserved_inherit — "So I just wrote it and I don't think I need anything more than this. I said now I want to make a search and filter component for my menu. I've added the following attributes in Webflow. They all have a name of data-filter list which is the main list."

Testing the Search Functionality:

__wf_reserved_inherit — "Okay, so we have this and it looks pretty I mean it looks out of place on the site to be honest. Um definitely wouldn't design it like this. But the goal here is to figure out if it's functional, right?"

Improving the User Interface:

__wf_reserved_inherit — "So, I have a little visual thing that I'm trying to fix, but obviously it made this look way way way way better. So, now does this work as well in preview? Dude, it works in preview. I can actually preview it."

Final Result and Conclusion:

__wf_reserved_inherit — "My goal in this video is to figure out, can this be done with Webflow code components? And the answer is an astounding clear fat yes, it can be done. That is super exciting."

Written by

Julian Galluzzo & Duncan Hamra

Contributors

Related Articles

What is the Webflow Cloud?

Webflow Cloud is not just a faster hosting or a minor infrastructure update. It is a complete reimagining of what you can build in Webflow.

Neal

Meet Rey: Your New AI Assistant in Memberstack’s Dashboard

Memberstack has launched Rey, an AI assistant integrated directly into your dashboard that can create plans, configure gated content, manage members, and troubleshoot issues through simple chat commands.

Neal

WF Weekly - Episode 18

Unlock the power of Webflow like never before by learning to build custom, API-powered React components with the help of an AI coding assistant.

Julian Galluzzo & Duncan Hamra

Oct 13, 2025