Image comparison slider

Customization Theme component
33

Alright folks, I had finally the time to work on this.
Hopefully there are still some interest in this TC!

The PR overhauls the TC with the following features:

  • Zoom and pan (mouse wheel, pinch, and on-image controls)
  • Fullscreen view
  • Open the original, full-size images in the lightbox
  • Optional before/after labels with configurable placement
  • Optional caption
  • Several handle styles (line, thin, circle, grabber) and a custom handle color
  • Edit sliders directly in the rich text editor, or with markdown
  • Keyboard accessible (arrow keys move the divider, +/-/0 zoom)
  • Restrict who can insert sliders by group

The markdown format has changed using [wrap] tag. Backward compatibility is ensured.
2026.6.0-latest is required.

It’s mobile and RTL friendly. Though, I’m not an UX expert, and I could not test much on mobile or IOS.

If you want to test separately, you can use:

  • URL: https://github.com/arkshine/discourse-image-comparison-slider
  • branch: modernize-with-rte
    (I’d recommend to not edit sliders from the previous version to not change the markdown format)
4 Likes