Diff

Image compare slider for before/after comparisons with draggable divider, labels, and vertical mode.

This component requires softui.js for interactive behavior.

Default

Before After 
<div class="sui-diff" data-sui-diff>
  <img class="sui-diff-before" src="before.jpg" alt="Before">
  <img class="sui-diff-after" src="after.jpg" alt="After">
  <div class="sui-diff-handle"><div class="sui-diff-handle-arrows"><svg viewBox="0 0 6 10"><path d="M6 0L0 5l6 5z"/></svg><svg viewBox="0 0 6 10"><path d="M0 0l6 5-6 5z"/></svg></div></div>
</div>

<!-- Drag the handle left/right to compare -->
<!-- Touch supported on mobile -->

With Labels

Old Design New Design
Before After 
<div class="sui-diff" data-sui-diff>
  <img class="sui-diff-before" src="old-design.jpg" alt="Old Design">
  <img class="sui-diff-after" src="new-design.jpg" alt="New Design">
  <div class="sui-diff-handle"><div class="sui-diff-handle-arrows"><svg viewBox="0 0 6 10"><path d="M6 0L0 5l6 5z"/></svg><svg viewBox="0 0 6 10"><path d="M0 0l6 5-6 5z"/></svg></div></div>
  <span class="sui-diff-label-before">Before</span>
  <span class="sui-diff-label-after">After</span>
</div>

Vertical

Before After
Before After 
<div class="sui-diff sui-diff-vertical" data-sui-diff>
  <img class="sui-diff-before" src="before.jpg" alt="Before">
  <img class="sui-diff-after" src="after.jpg" alt="After">
  <div class="sui-diff-handle"><div class="sui-diff-handle-arrows"><svg viewBox="0 0 6 10"><path d="M6 0L0 5l6 5z"/></svg><svg viewBox="0 0 6 10"><path d="M0 0l6 5-6 5z"/></svg></div></div>
  <span class="sui-diff-label-before">Before</span>
  <span class="sui-diff-label-after">After</span>
</div>

<!-- Drag the handle up/down -->

Delete this item?

This action cannot be undone. This will permanently delete the item and remove all associated data.

Pages
Get Started Playground Theming Changelog RTL Demo
Forms
Inputs Toggles & Checks Slider Color Picker Rating File Upload Input OTP Combobox Calendar Segmented Control Editable Text
General
Buttons Button Group Cards Avatars Badges Chip Copy Button Kbd Divider Pricing Hero List Group
Data Display
Stat Card Tables Data Table Chart Radial Progress Timeline Tree View Skeleton Descriptions Countdown
Feedback
Alerts Toast Progress Spinner Loading Overlay Result
Navigation
Navbar Sidebar Breadcrumbs Tabs Pagination Stepper Dock Speed Dial Navigation Menu Scrollspy
Overlays
Modal Sheet Dropdown Popover Hover Card Tooltips Context Menu Command Menubar
Layout
Layout Scroll Area Accordion Collapsible Resizable Drag & Drop
Media
Carousel Image Lightbox Diff Chat Bubble Browser Mockup Marquee Phone Mockup Stack Swap Text Rotate Tour Typewriter Toggle Group
Utilities
Shadows Border Radius Spacing Text & Colors Flex Aspect Ratio Typography Display Position Sizing Opacity Cursor Mask