Start by placing the Slider Button element on your page, then adjust its visual and behavior settings in the property editor. You can define the label text shown in the center, choose a default color for the idle state and a success color for the validated state, and set the hold duration in milliseconds. The hold duration controls how long users must keep the handle at the far right before the confirmation is accepted. You can also fine-tune the shape with border radius and padding to match your UI style.
Once the element is configured, go to Bubble workflows and add a trigger for the button_slided event. This is the main confirmation event, and it should be used to launch your protected action (for example deleting data, submitting a critical form, or confirming a payment step). Because the slider requires both drag and hold, it reduces accidental activation compared to a regular button.

If you want real-time interaction feedback, you can use the button_dragged event together with the drag_completion_percent state. This lets you react to progress while the user is dragging (for example showing dynamic hints or UI feedback as completion increases).

Finally, when needed, you can call the reset_button element action from a workflow to restore the component to its initial state. This is useful after a completed action, when reusing the same slider for another attempt, or after a timeout/cancellation flow.

View the editor here : https://bubble.io/page?id=pocplugins&tab=Design&name=slider_button&type=page&elements=bTIMn