Changing Content via Slider

Hello everybody,

I am looking for a way to change content on https://www.geekwrapped.com by using a slider on the top.

The idea is to let people slide to different options (e.g. geek gifts, science gifts, etc.) and the content below changes.

Is there a creative solution that makes it possible to do this in Webflow?

Thanks for your help,
Simon

Not exactly sure what you mean… So is the customer going to click a nav menu link? Then the slider changes and the page change as well?

1 Like

Hi @garymichael1313

Picture a slider similar to this:
image

It would have 3-5 options on it. The user moves the slider to the options and then the content below on the page would change based on that.

Example: Let’s say the options are

Cheap Gifts ------------------- Normal Gifts ------------------- Expensive Gifts

Sliding or clicking each option would then change the content on the page below.

Okay which part?? The auto-brightness green toggle… Similar to these?
https://webflow.com/website/toggle-button
https://webflow.com/website/Toggle-Switch

1 Like

Thanks for these. Let’s disregard how the slider can be designed, my question is more about how a button/slider can change the text and content on the page.

  1. Is there a way to create a slider button on the top of a page that, when clicked, changes the entire content of the page (e.g. using tabs + a slider button)?

  2. Is there a way to store this selection universally on the website, so that all pages are influenced by the decision?

Hi @webdes

Thanks so much for posting about this and great question! Currently this sort of functionality isn’t possible natively in Webflow. However you can definitely add in some custom code when working with Tabs or the Slider components.

A resource that you may find helpful is Bart’s post here: Different icons for every slider - #2 by bartekkustra

Hope this helps point you in the right direction! :slight_smile:

1 Like

Thanks, @Brando

Would it be possible to achieve this by using tabs and then tying the tab click to a CSS design that looks like a drag-able bar (see screenshot in the forum post above)?

1 Like

@webdes Yes I think that may be possible! Especially with the launch of IX2! :slight_smile:

1 Like

@Brando that looks very promising! Any idea if there is a tutorial or example that would illustrate this? Thanks for your help

@webdes we don’t have a tutorial or example like this quite yet! But if you do end up creating one, please share it with the rest of the community! I would love to see how you build this! :slight_smile:

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.