Using a slider as a filter, to filter team-members

Hey nice people, hope you´re doing well?
I´m looking for help to filter team-members. To do so I gathered infos about the team-members and looked for groups. Example: 2 members of 10 are using a bike to go to the office. Now I want that website users can use a slider to switch between the quotes…and only those team-members who fit to the quote should be displayed.

I achieved to filter the members via filter-buttons. You can see those under “Mitarbeiter”. (The Java-Script isn´t working inside designer)

I also shared a link to an agency website which already added the functionality (but not via webflow): Team – buero bauer
You can try it out there and maybe you have an idea how to achieve this via Webflow using CMS for the members and the quotes. To make it more clear I also have a screenshot from this component on this specific website:


Here is my site Read-Only: Webflow - abhd

hi @tobialbrecht89 the Buero Bauer website use a few JS libraries and one of these is Isotope you should look into.

Hi Stan, thx for your comment. Basically what the isotope is doing (to display a bunch of buttons and I can filter via click on button) I already achieved. The question would be how can I achieve the same with a slider. I don´t know how to tell the component that the trigger to filter is to display a quote in the slider.

1 Like

hi @tobialbrecht89 when you look on their structure is more than clear how it is done. They use custom attribute data-filter and use this attribute to filter out content with use of isotope. It may need some custom JS to make it work. :wink:

Each team member has assigned a few classes as tag-1 tag-13 tag-16 tag-15 tag-7 tag-8 tag-10 tag-11 when slider is changed it will filter out team members that do not have current class eg. tag-1 assigned or vice versa.

Hope that is clear