# Before/After Image Comparison Slider

> Adds a [wpide_compare before="URL" after="URL"] shortcode that overlays two images with a draggable divider, perfect for renovations, retouching and redesigns.

- Type: PHP
- Runs: Run everywhere
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: images, comparison, slider, shortcode
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-image-compare-shortcode/

## Code

```php
add_action( 'wp_enqueue_scripts', function () {
    wp_register_style( 'wpide-compare', false, array(), '1.0' );
    wp_add_inline_style( 'wpide-compare', '.wpide-compare{position:relative;overflow:hidden;--pos:50%;user-select:none;line-height:0;border-radius:6px;}.wpide-compare img{display:block;width:100%;height:auto;}.wpide-compare__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos));}.wpide-compare__after img{height:100%;object-fit:cover;}.wpide-compare__line{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 6px rgba(0,0,0,.4);pointer-events:none;}.wpide-compare__line::after{content:"\2194";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:#fff;color:#111;font:20px/40px sans-serif;text-align:center;}.wpide-compare input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;}.wpide-compare input:focus-visible+.wpide-compare__line{background:#2271b1;}.wpide-compare__label{position:absolute;bottom:10px;padding:4px 8px;background:rgba(0,0,0,.6);color:#fff;font:600 12px/1.4 sans-serif;border-radius:3px;pointer-events:none;}' );

    wp_register_script( 'wpide-compare', false, array(), '1.0', true );
    wp_add_inline_script( 'wpide-compare', "document.addEventListener('input',function(e){if(e.target.matches&&e.target.matches('.wpide-compare input')){e.target.closest('.wpide-compare').style.setProperty('--pos',e.target.value+'%');}});" );
} );

add_shortcode( 'wpide_compare', function ( $atts ) {
    $atts = shortcode_atts( array( 'before' => '', 'after' => '', 'before_label' => 'Before', 'after_label' => 'After', 'alt' => '' ), $atts, 'wpide_compare' );

    $src = function ( $value ) {
        return ctype_digit( (string) $value ) ? wp_get_attachment_image_url( (int) $value, 'large' ) : $value;
    };

    $before = $src( $atts['before'] );
    $after  = $src( $atts['after'] );

    if ( ! $before || ! $after ) {
        return '';
    }

    wp_enqueue_style( 'wpide-compare' );
    wp_enqueue_script( 'wpide-compare' );

    return sprintf(
        '<div class="wpide-compare"><img src="%1$s" alt="%3$s" loading="lazy" decoding="async"><span class="wpide-compare__label" style="left:10px;">%4$s</span><div class="wpide-compare__after" aria-hidden="true"><img src="%2$s" alt="" loading="lazy" decoding="async"><span class="wpide-compare__label" style="right:10px;">%5$s</span></div><input type="range" min="0" max="100" value="50" aria-label="%6$s"><span class="wpide-compare__line"></span></div>',
        esc_url( $before ),
        esc_url( $after ),
        esc_attr( $atts['alt'] ),
        esc_html( $atts['before_label'] ),
        esc_html( $atts['after_label'] ),
        esc_attr( sprintf( 'Drag to compare %s and %s', $atts['before_label'], $atts['after_label'] ) )
    );
} );
```

## Notes

Both images should have the same size and aspect ratio. Media Library attachment IDs also work: before="123" after="124". The slider works with touch, mouse and keyboard.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Before/After Image Comparison Slider" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/