Create Toggle in bubble

[adig]

Hi guys,

How do I create that toggle with day/hour below? And bonus: how do i get a nice effect when the bubble moves between hour and day?

[J805]

Hey @adig

Check this out:

Preview: Your Bubble app

Editor: 805testapp42 | Bubble Editor

Hope that helps!

[connect10]

@adig

Hi guys,

How do I create that toggle with day/hour below? And bonus: how do i get a nice effect when the bubble moves between hour and day?

Hey! @adig You can build this pretty cleanly using a custom toggle rather than a native input. The usual approach is to place two text elements (e.g. “Day” and “Hour”) inside a group, then add a small rounded shape or group behind them that acts as the sliding “bubble.” Store the selected state in a custom state (like view = day/hour) and move the bubble’s position based on that state.

For the smooth effect, just enable animations on the bubble (or group) and use “move/slide” or “fade” transitions when the custom state changes. Bubble handles this surprisingly well without any plugins. Clicking “Day” sets the state to day, clicking “Hour” sets it to hour, and the bubble animates between the two.

It’s a really common pattern in Bubble, and once you set it up once, you can reuse it everywhere

[adig]

thanks mate. but I have a few follow-up questions:

1. How do I position the group '“behind” the text? At the moment it’s in the middle. See my tree below

2.

2. How do I move the bubble horizontally (on X) to perfectly cover the text?

[m.andremuniz]

1. You can move the groups to a position above the text, so it will be below the text in the hierarchy.
2. You can create conditional formatting to be triggered when the group is clicked; if necessary, also use custom states.

[adig]

Hey mate,

Unfortuanately, it doesn’t make any sense. There is just one group i want to slide from right to left or vicevrsa. I have the rules in place because I used them on a slider that doesn’t work very well.

How would i move the group (bubble) to perfectly be over the text and stop at the end of the parent container?

[m.andremuniz]

Sorry, I must not have understood correctly the first time.

So you can use the parent group as an “align to parent” to be able to move elements between them.

[carlovsk.edits]

Bubble Editor - Carlovsk-helps

I made a solution similar to @J805’s, take a look.

[amjad]

build it with a custom toggle (not the native input) and store your state in a custom state. then just use animations on your group when the state changes—move, slide, or fade all work great depending on what vibe you’re going for.

[adig]

legend man. thank you!!