Toggle slider with vanilla bubble

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
screen-recording-togglebutton-gif

Heres how to:

  1. create a reausable element (lets call it “toggle-button” for this Tip) with custom state toggle_on of type yes / no
  2. 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%
  3. 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
  4. 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:
Bildschirmfoto 2024-10-18 um 06.49.12
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 :slight_smile:

3 Likes