PHPackages                             macgyer/mg-image-comparison-slider - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. macgyer/mg-image-comparison-slider

ActiveTypo3-cms-extension[Image & Media](/categories/media)

macgyer/mg-image-comparison-slider
==================================

Slider for showing the difference between two images

1.1.1(3mo ago)016[3 issues](https://github.com/MacGyer/mg-image-comparison-slider/issues)GPL-2.0-or-laterPHPPHP ^8.2

Since Oct 31Pushed 3mo agoCompare

[ Source](https://github.com/MacGyer/mg-image-comparison-slider)[ Packagist](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[ RSS](/packages/macgyer-mg-image-comparison-slider/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (2)Versions (6)Used By (0)

[![TYPO3 13](https://camo.githubusercontent.com/72d1fd53c343c99c072f2cfcba449b7837836a64f8f0374465f9506fa8b595e4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31332d6f72616e67652e7376673f7374796c653d666f722d7468652d6261646765)](https://get.typo3.org/version/13)[![Latest Stable Version](https://camo.githubusercontent.com/9ca42990aebafbf42e4dbab608387b271dd1419f5bfcc0760b692ebdd1876fdf/687474703a2f2f706f7365722e707567782e6f72672f6d6163677965722f6d672d696d6167652d636f6d70617269736f6e2d736c696465722f763f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[![Total Downloads](https://camo.githubusercontent.com/a4ed475c1e6925c1d86eafe9c0bb0c2dc47fc6eca961560df7de36f2eb9e8f1b/687474703a2f2f706f7365722e707567782e6f72672f6d6163677965722f6d672d696d6167652d636f6d70617269736f6e2d736c696465722f646f776e6c6f6164733f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[![License](https://camo.githubusercontent.com/3c4dce2faa829e281c19ee211720bf0c30fbb6775130ed033a72fc08b8300c53/687474703a2f2f706f7365722e707567782e6f72672f6d6163677965722f6d672d696d6167652d636f6d70617269736f6e2d736c696465722f6c6963656e73653f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[![PHP Version Require](https://camo.githubusercontent.com/a357dc87805ab9c40c9eefc2085fbfbc40c3343e20f533131595f2900c49bc64/687474703a2f2f706f7365722e707567782e6f72672f6d6163677965722f6d672d696d6167652d636f6d70617269736f6e2d736c696465722f726571756972652f7068703f7374796c653d666f722d7468652d6261646765)](https://packagist.org/packages/macgyer/mg-image-comparison-slider)[![Donate](https://camo.githubusercontent.com/6c77ceb6b90e7f66f006be54740623450b1197f935060be46d7202652a43c773/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f6e6174652d50617950616c2d677265656e2e7376673f7374796c653d666f722d7468652d6261646765)](https://paypal.me/macgyer/5)

Image Comparison Slider
=======================

[](#image-comparison-slider)

A slider showing the difference between two images. Can be used vertical and horizontal. Based on `img-comparison-slider`by [sneas](https://img-comparison-slider.sneas.io/).

Installation
------------

[](#installation)

The preferred way of installation is through Composer. If you don't have Composer you can get it here:

To install the package add the following to the `require` section of your composer.json:

```
"require": {
    "macgyer/mg-image-comparison-slider": "^1.0"
}
```

Include the Site set, either in your page config or as dependency of another set.

Changelog
---------

[](#changelog)

### 1.1.1 - 2026-02-01

[](#111---2026-02-01)

- \[NEW\]: update JS library to [8.0.7](https://www.npmjs.com/package/img-comparison-slider/v/8.0.7) which uses Constructable Stylesheets for Shadow DOM to avoid issues with nonce attribute when CSP is enabled

### 1.1.0 - 2025-11-22

[](#110---2025-11-22)

- \[FIX\]: render images with `` instead of partial
- \[NEW\]: add settings for handle and divider

### 1.0.1 - 2025-10-31

[](#101---2025-10-31)

- \[TASK\]: cleanup unnecessary CSS rules
- \[TASK\]: fix README URLs

### 1.0.0 - 2025-10-31

[](#100---2025-10-31)

- initial release

---

URL**Repository:****TER:**[https://extensions.typo3.org/extension/mg\_image\_comparison\_slider](https://extensions.typo3.org/extension/mg_image_comparison_slider)

###  Health Score

38

—

LowBetter than 85% of packages

Maintenance81

Actively maintained with recent releases

Popularity8

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity51

Maturing project, gaining track record

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~31 days

Total

4

Last Release

100d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/78f83100a0024086e9dcecb006456faedf561f296fbc0b6a86b6eb1f052e46c0?d=identicon)[macgyer](/maintainers/macgyer)

### Embed Badge

![Health badge](/badges/macgyer-mg-image-comparison-slider/health.svg)

```
[![Health](https://phpackages.com/badges/macgyer-mg-image-comparison-slider/health.svg)](https://phpackages.com/packages/macgyer-mg-image-comparison-slider)
```

###  Alternatives

[netresearch/rte-ckeditor-image

Image support in CKEditor for the TYPO3 ecosystem - by Netresearch

63991.3k4](/packages/netresearch-rte-ckeditor-image)[christophlehmann/imageoptimizer

Optimize uploaded/processed images with binaries of your choice

46501.8k](/packages/christophlehmann-imageoptimizer)[plan2net/webp

Creates WebP copies for images (TYPO3 CMS)

661.4M3](/packages/plan2net-webp)[blueways/bw-focuspoint-images

Image Editor for adding focus points to images

12102.7k1](/packages/blueways-bw-focuspoint-images)[fab/media-upload

Fluid widget for mass uploading files on the Frontend using HTML5 techniques powered by Fine Uploader - http://fineuploader.com/

1927.8k1](/packages/fab-media-upload)[bobosch/ods-osm

Add an interactive OpenStreetMap map to your website. Can also show other OpenLayers compatible maps.

1027.6k](/packages/bobosch-ods-osm)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)