Generate Before/After Image Slider

What This Sidekick Query Does

Create a before/after image comparison slider block:

Features:

  Two images side by side with draggable divider
  “Before” and “After” labels
  Smooth drag interaction
  Touch support for mobile
  Optional auto-slide animation on page load


Settings:

  Before image picker
  After image picker
  Before label text
  After label text
  Divider color
  Divider style (line/handle)
  Starting position (percentage)
  Image aspect ratio
  Section heading


Requirements:

  Works on touch devices (swipe to compare)
  Responsive image sizing
  Smooth 60fps drag performance
  No external libraries (vanilla JS)
  Accessible with keyboard (arrow keys)


Generate as a theme block.

Expected Output

Tips to Improve Results