Recently, I was working on a project where we needed an efficient solution to demonstrate some Lightroom presets applied to the photos. A before-after slider seemed to be a good solution here. Finally, I decided to code such a slider myself. That’s how Beer Slider was born. It’s written in vanilla JavaScript, but it can be easily implemented by those of you who are more comfortable with jQuery or Zepto.

It’s keyboard accessible, responsive and open-source.

First of all, check the demo page for a few examples and the usage instructions.

PS. You will find some great (and free) Lightroom presets on – some of them were used in our examples.

Further Examples on Codepen:

Basic + source code: SCSS and JS (Babel):

See the Pen BeerSlider – before-after reveal slider – code source, basic demo by Paulina Hetman (@pehaa) on CodePen.

Usage with jQuery or Zepto:

See the Pen BeerSlider – use with jQuery and various start parameters by Paulina Hetman (@pehaa) on CodePen.

Usage with background images

The Beer Slider is not only for comparing images, try it for backgrounds.

See the Pen Background Comparison by Paulina Hetman (@pehaa) on CodePen.

Fitting images into container with svg

Sometimes you may need that your images cover the slider’s area. For example – you want to have a slider that fills the whole screen, or you want it to be a square. With Beer Slider you can use the svg approach proposed by Sara Soueidan.

See the Pen Full width full height before-after slider by Paulina Hetman (@pehaa) on CodePen.

See the Pen Circle before-after slider by Paulina Hetman (@pehaa) on CodePen.

Thank you! We hope that some of you will find it useful. See you soon!

Fork it on Github

I'm a front-end developer, WordPress developer and trainer. Otherwise coding, cooking and doing yoga. Polish, married to a french guy Joe Vains with whom we live in the very center of Paris.
Follow @PeHaa on twitter and on CodePen.


Comments (3)

  1. Hi, can i ask how you make the slider responsive?

    I’d like to have some before/after in fullscreen modals, i’ve tried everything, a wrapper, setting max-width on the #slider, the two images end up being mismatched by some pixels.

    If i open and close the inspector it runs fine

  2. Hi, I’ve been using your code(thank you very much for sharing btw) for my site. but for some reason, it suddenly stop on mobile devices.. not sure what happened.. didn’t do an update or changes in the codes..

    So the slider goes to the very left side of the images being compared.. and i can’t seem to pull it back..
    please see video

    used to view it:
    Iphone 13 pro max
    Chrome / Safari
    i used this site as sample..

    hope you can help me..

Leave a reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.