Hi Y’all
It is easily possible to build a reactive toggle slider in bubble with the select a property to define a new transition
functionality on the Appearance tab of the property editor. It takes around 15-30mins to build one as a reusable element and you can use it properly over your whole application, no need for 3rd party plugins.
I styled it like so, but you can create other transitions
Heres how to:
- create a reausable element (lets call it “toggle-button” for this Tip) with custom state
toggle_on
of type yes / no - place a group in that reusable element with alignment
align to parent
and with the name “G-Button”
2.1 (if you want background color change when selected) put in a transition for “background style” of 200 ms with ‘Ease’
2.2 create a Condition of ‘When toggle-button’s toggle_on [the custom state we created earlier] is yes’ → change background color
2.3 I used the following sizes for my group:
2.3.1 width: 48px to inf;
2.3.2 height: 24px to inf;
2.3.3 background: #F5F5F5 at 100% (+ when toggle_on is yes = #3632DF);
2.3.4 border: solid, 1px, #AAAAAA at 30% + rounded edges 20px
2.3.5 boxshadow: inset, 2 2 4 0, #AAAAAA at 20% - place a group inside the G-Button group of name “G-round-thing” with the following element attributes:
3.0 set 3 custom states as follows and in the following top down order (execution order bottom up): toggle-button’s toggle-on is yes → left margin 25px; G-button is pressed and toggle-button’s toggle-on is no → left margin 1 min width 24px; G-button is pressed and toggle-button’s toggle-on is yes → left margin 21px, min width 24px
3.1 alignment within parent on left side, vertically in the middle & margins on all side of 1px
3.2 size: 20px-inf width, 20px-inf height
3.3 background color #FFFFFF
3.4 border solid, 1px, #D5D5D5, 20px rounded
3.5 shadow outset, 2 2 4 0, #AAAAAA at 30%
3.6 Transitions: left margin transition 300 with Ease; min width transition 300 with Ease - create the following workflows
4.1 when G-button is clicked and toggle-button’s toggle-on is No → set state of toggle-button to yes
4.2 when G-button is clicked and toggle-button’s toggle-on is yes → set state of toggle-button to yes
Tada, your reusable toggle button is finished and ready for use in your page.
You can trigger actions with it by listening to the toggle-button’s reusable element custom state “toggle-on” via ‘Do always when condition is true’ and then perform the necessary actions on the page when toggle-on is yes & when toggle-on is no
Hopefully this guide helps you create your custom toggle-button.
This approach should also be feasible to build something like this:
You would just have to put in text’s left & right of the button and change their styling according to toggle-on’s yes / no
Share your stylings for inspiration for others if you want to