🎉 New Component: Pro Slide Action - Prevent Accidental Taps with Smooth "Slide to Confirm" Gestures!

Resources & Tutorials
,
1

componentes
componentes1865Ă—1028 38.2 KB

Video Demo: https://youtu.be/BiP9tb38F1k
More components: kurepadev

Hey Adalo makers! :waving_hand:

Accidental taps on critical actions—like processing payments, completing deliveries, or unlocking features—can lead to user frustration and messy database errors.

That’s why we built Pro Slide Action—a fluid, tactile “slide to confirm” component that gives your users unmistakable physical feedback while keeping high-stakes actions completely safe.

:sparkles: What does it do?

Pro Slide Action replaces standard buttons with an interactive slider. Users drag the thumb across the track to confirm an action. If they let go too early, it gently springs back to the start. Once they reach the end, it smoothly transitions into a custom success state and triggers your Adalo action instantly.

:key: Key Features

  • :high_voltage: 60fps Native Drag Performance: Powered by React Native’s Animated and PanResponder for buttery-smooth drag physics and a satisfying spring-back bounce if released early.

  • :artist_palette: Dynamic Progress Fill: The track progressively fills with your brand’s accent color as the user drags, immediately revealing the success state and custom completion text upon reaching 100%.

  • :sparkles: Active Drag Feedback: Features an optional soft glow and subtle scale-up animation while the thumb is actively being dragged, making the UI feel responsive and alive.

  • :framed_picture: Custom PNG Icon Support: Use the built-in arrow icon or upload your own custom PNG for the draggable control straight from the Adalo panel.

  • :paintbrush: 100% Themeable: Complete control over track colors, progress fill, thumb background, success colors, icon tint, and corner radius—with shared roundness controls so the thumb and track always match perfectly.

  • :counterclockwise_arrows_button: Optional Auto-Reset: Configure the slider to stay locked in the “Completed” state or automatically return to its starting position after a few seconds.

  • :globe_with_meridians: Cross-Platform & Zero Dependencies: Built entirely with core React Native components. Zero third-party packages means lightning-fast Webpack builds and flawless performance on iOS, Android, and Web (PWA).

Perfect for:
:credit_card: Payment & Checkout Confirmations (prevent accidental double charges)
:package: Delivery & Task Completions (courier and field service apps)
:unlocked: Device & Feature Unlocks
:warning: Destructive Actions (account deletion, resetting data, leaving groups)

1 Like
2

Outstanding update! Thx

1 Like