# Swipe Area **Path:** Components/Interactive [Back to Documentation Index](http://rubicblazor.skyconis.com/docs.md) --- Swipe Area RbSwipeArea listens to pointer events to detect swipe gestures and their directions. It's perfect for implementing touch-friendly navigation, image galleries, card swipes, and mobile-first interfaces. Note: When PreventDefault is set to true, the browser will not scroll within the swipe area. Basic Swipe Detection Detect swipe directions and respond to user gestures. Show code Swipe in any direction Swipe with Toast Notification Swipe to Get Notification Each swipe will trigger a toast message Directional Control Control which swipe directions are allowed. Show code Horizontal Swipe Only Only left and right swipes are detected: Horizontal Swipe Only Try swiping left or right Vertical Swipe Only Only up and down swipes are detected: Vertical Swipe Only Try swiping up or down Interactive Direction Control Allow Horizontal Swipe Allow Vertical Swipe Custom Direction Control Horizontal: True Vertical: True Swipe based on allowed directions Configuration Info AllowHorizontalSwipe: Enables/disables left and right swipe detection AllowVerticalSwipe: Enables/disables up and down swipe detection Use these properties to restrict swipe directions based on your UI requirements. With Scrollable Content Combine swipe detection with scrollable content areas. Show code Horizontal Swipe with Vertical Scroll Content scrolls vertically, but horizontal swipes are detected: Scrollable Content You can scroll this content vertically while horizontal swipes are detected. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pulvinar interdum felis ac faucibus. In tortor dolor, auctor nec nisl vitae, porttitor hendrerit sem. Nunc in aliquam orci. Duis ac nunc ac ex semper eleifend.Maecenas lacinia purus vitae lacus rutrum maximus.Ut aliquam id dolor ut semper. Vivamus ultrices turpis quam, in molestie mi consectetur pharetra. Nunc eget massa nunc.Vestibulum eleifend tempus turpis, eget dignissim lectus laoreet a. Curabitur lobortis, libero ut efficitur pretium, ipsum nibh semper justo, at pretium mauris libero id enim.Curabitur in egestas ligula. Mauris feugiat iaculis ante ac auctor. Suspendisse et ullamcorper quam, a commodo ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Nunc quis nunc sapien. Maecenas enim arcu, ornare sit amet dolor a, fermentum posuere enim.Nullam vel congue diam, ut sollicitudin justo. Phasellus porttitor, metus vel posuere egestas, dui velit congue augue, nec sollicitudin magna nulla non eros.Pellentesque efficitur risus ut tristique porttitor. Etiam sit amet blandit tellus.Etiam nec eros lacus. Maecenas nunc nulla, suscipit et mauris non, consequat aliquet metus.In hac habitasse platea dictumst.Proin scelerisque lacus ut nibh viverra, et tincidunt nibh lobortis.Donec ipsum ante, blandit vel mattis ac, eleifend vitae sapien. Nam mattis finibus rutrum. Nullam tincidunt tortor nisi, ac molestie nulla congue sed. Aenean hendrerit nisl id dignissim sagittis. Fusce accumsan porta erat at aliquet. Donec at finibus mi. In erat quam, sagittis in ullamcorper ut, malesuada sed lacus. Sed lorem justo, volutpat in enim at, fringilla efficitur nisi. Integer ultricies erat non ipsum mollis lobortis.In eu dolor luctus lacus dictum dapibus sed eleifend mi. Proin in urna non neque condimentum tincidunt.Cras risus justo, imperdiet id nisi vel, sagittis accumsan lacus. Sed eget nisi sit amet eros aliquam dapibus et vitae ante.Nulla mattis congue risus, eget tempor nunc bibendum luctus. Nunc gravida nibh nisl, quis varius justo suscipit in. Ut ut libero mauris. Sed condimentum, tellus sed condimentum maximus, purus dui suscipit odio, et interdum dui enim sed nisl.Duis commodo non est et egestas. Mauris et felis porta, lacinia risus eget, dictum erat.Vestibulum eget ultrices nisl. Etia0m eget iaculis lectus, sed rhoncus velit.Nam at neque fermentum, finibus ligula consequat, sodales massa.Quisque dictum hendrerit ligula, ut fringilla tellus. Cras congue tellus ex. Phasellus eu turpis ac nunc tristique cursus.Mauris lorem nisl, aliquet at augue eget, hendrerit feugiat sem. Maecenas suscipit aliquam diam vitae tempus. Pellentesque in purus eu odio dapibus iaculis.Nam venenatis ex et quam accumsan venenatis.Maecenas tincidunt, est eget consequat efficitur, ex purus rutrum tellus, ut mattis justo urna in arcu.Sed semper justo eu leo semper, id porta massa varius.Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.Suspendisse fringilla varius dolor, quis egestas ligula condimentum nec. Aenean consequat velit est, et commodo sapien aliquam sed. Pellentesque eu volutpat dui, ut vulputate ex. Vertical Swipe with Horizontal Scroll Content scrolls horizontally, but vertical swipes are detected: Horizontally Scrollable Content This content is wider than the container and can be scrolled horizontally. Vertical swipes are still detected. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. More wide content that requires horizontal scrolling to view fully... Swipe Navigation with Content Current Page: 1 Page 1: Home Welcome to the first page. Swipe left to go to the next page. 1 2 3 Usage Tips AllowVerticalSwipe=false: Allows vertical scrolling while detecting horizontal swipes AllowHorizontalSwipe=false: Allows horizontal scrolling while detecting vertical swipes PreventDefault=false (default): Allows normal scrolling behavior PreventDefault=true: Prevents default browser scrolling for full swipe control Threshold & Sensitivity Adjust swipe sensitivity and threshold settings. Show code Adjustable Threshold Threshold: 100 px - Minimum distance required to trigger a swipe Swipe Threshold (pixels) Threshold: 100 px Swipe to test Adjust the slider above to change sensitivity Low Threshold (Very Sensitive) Threshold: 20px - Very easy to trigger swipes Very Sensitive (20px) Short swipes work here Default Threshold Threshold: 100px (default) - Balanced sensitivity Default Sensitivity (100px) Medium swipes needed High Threshold (Less Sensitive) Threshold: 250px - Requires longer swipes Less Sensitive (250px) Long swipes required Understanding Threshold ThresholdInPixel determines how far you need to swipe before it's registered: Low (10-50px): Very sensitive, good for quick gestures but may trigger accidentally Default (100px): Balanced sensitivity for most use cases High (200-300px): Requires deliberate swipes, prevents accidental triggers Use Cases: Image galleries: Lower threshold for quick navigation Important actions (delete, archive): Higher threshold to prevent mistakes Mobile interfaces: Medium threshold for comfortable touch interaction Practical Examples Real-world use cases like image galleries and card navigation. Show code Image Gallery with Swipe Navigation Mountain Landscape Image 1 of 4 1 2 3 4 Swipe left or right to navigate Swipeable Cards (Tinder-style) Mountains Beautiful mountain landscape Swipe Left to Skip Swipe Right to Like 5 cards remaining Swipe Actions (Email-style) John Doe Meeting Tomorrow 10:30 AM Jane Smith Project Update Yesterday Bob Wilson Quick Question 2 days ago Tip: Swipe left to delete, swipe right to archive Use Cases Image Galleries: Navigate through photos with natural swipe gestures Card Stacks: Tinder-style swipe to like/dislike interface List Actions: Swipe to reveal actions like delete, archive, or flag Onboarding: Swipe through tutorial or welcome screens Carousel: Browse products or content with touch gestures ✕ Contents