Compare slider

1. Copy to Webflow

   Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: Webflow removes any font your site has not installed.
   Copy to Webflow

2. Add custom CSS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

   Give the box a width and both pictures the same size: the first picture gives the box its height, the second is stretched over it. The box clips what sticks out of it, so a shadow goes on a wrapper around it.

3. Add custom JS

   To keep things simple, the code ships inside the Webflow embed. You can also copy it here and add it yourself to the page or site custom code. How to choose

4. Use it on your own elements

   Custom attributes
   Select the element on the canvas and open the Settings panel. Under Custom attributes, add a pair: the name on the left, the value on the right.

   Custom attribute	What it does
   data-compare-slider	Marks the box that holds the two pictures. It takes no value: leave the value field empty. The first picture in the box is the one before, the second the one after, and the handle is added to that box, which also carries the settings. Without it on any box of the page nothing is mounted, and the embed says so in the console.
   data-compare-slider-picture	Marks the two elements to compare when they are not images, videos or canvases, two blocks with a background for one: the first marked is before, the second after. Without it the first two pictures of the box are taken, and the engine writes the mark on them itself, before and after. [ Optional ]
   data-compare-slider-state	Written by the engine on the box: live while the split is moving, idle at rest, still under reduced motion. Never written by hand. [ Optional ]
   data-compare-slider-axis	Written by the engine on the box from the orientation setting: x for a split that travels left and right, y for one that travels up and down. Never written by hand; the stylesheet reads it to turn the clip, the rule and the tags. [ Optional ]

   Settings
   Every setting is a custom attribute too, added the same way and on the same element. An attribute always wins over the defaults written in the code.

   Attribute	Default	What it is
   data-compare-slider-color	#ffab1a	Colour of the rule and of the ground of its two tags. Options: any CSS colour, the amber #ffab1a by default.
   data-compare-slider-label-color	#15100c	Colour of the words on the two tags, read against color. Options: any CSS colour, the ink #15100c on the amber by default.
   data-compare-slider-rest	50	Where the split sits when nobody is on the box, 0 to 100, and where it glides back to when the pointer leaves.
   data-compare-slider-stiffness	140	Pull of the spring that carries the split to the pointer.
   data-compare-slider-damping	16	Brake of the spring, read against stiffness.
   data-compare-slider-intro	true	Whether the split plays one short sweep the first time the box enters the window. Options: true plays it once, when the box is a third in view and its pictures are loaded; false leaves the split at rest.
   data-compare-slider-follow	true	Whether the split follows a mouse that only passes over the box. Options: true follows the pointer and glides back to rest when it leaves; false moves on a press or a drag only, and stays where it is left.
   data-compare-slider-orientation	horizontal	The way the split travels. Options: horizontal, a vertical rule that moves left and right, the first picture on the left; vertical, a horizontal rule that moves up and down, the first picture on top.
   data-compare-slider-before	Before	Word of the tag on the side of the first picture, also what a screen reader calls that picture. Options: any short word; empty takes the tag away.
   data-compare-slider-after	After	Word of the tag on the side of the second picture, also what a screen reader calls that picture. Options: any short word; empty takes the tag away.

Two files and their pictures (2), no build step. It runs in the browser only. Load it with a script tag in plain HTML, in a client-side script in Astro, never in the frontmatter. In React, call CompareSlider.mount(ref.current) in useEffect and destroy() in its cleanup.

1. Tune it, either way

   Per element with an attribute, or once for the whole site by editing DEFAULTS at the top of the file.

   Attribute	Default	What it is	Lower	Higher
   data-compare-slider-color	#ffab1a	Colour of the rule and of the ground of its two tags. Options: any CSS colour, the amber #ffab1a by default.
   data-compare-slider-label-color	#15100c	Colour of the words on the two tags, read against color. Options: any CSS colour, the ink #15100c on the amber by default.
   data-compare-slider-rest	50	Where the split sits when nobody is on the box, 0 to 100, and where it glides back to when the pointer leaves.	Towards 0 the box rests on the second picture	Towards 100 the box rests on the first picture
   data-compare-slider-stiffness	140	Pull of the spring that carries the split to the pointer.	Under 80 the rule trails far behind and feels heavy	Over 300 it sticks to the pointer and the lag is gone
   data-compare-slider-damping	16	Brake of the spring, read against stiffness.	Under 10 the rule swings past its target several times	Over 26 no overshoot at all, the rule only eases in
   data-compare-slider-intro	true	Whether the split plays one short sweep the first time the box enters the window. Options: true plays it once, when the box is a third in view and its pictures are loaded; false leaves the split at rest.
   data-compare-slider-follow	true	Whether the split follows a mouse that only passes over the box. Options: true follows the pointer and glides back to rest when it leaves; false moves on a press or a drag only, and stays where it is left.
   data-compare-slider-orientation	horizontal	The way the split travels. Options: horizontal, a vertical rule that moves left and right, the first picture on the left; vertical, a horizontal rule that moves up and down, the first picture on top.
   data-compare-slider-before	Before	Word of the tag on the side of the first picture, also what a screen reader calls that picture. Options: any short word; empty takes the tag away.
   data-compare-slider-after	After	Word of the tag on the side of the second picture, also what a screen reader calls that picture. Options: any short word; empty takes the tag away.

2. Drive it from JavaScript

   When something other than the pointer should move the split, a button or a scroll position, or when the page reacts to the value it comes to rest on.
   JavaScript Expand Copy

   const element = document.querySelector('[data-compare-slider]');
   element.addEventListener('compareslider:change', (e) => {
     console.log(e.detail);
   });
   
   const slider = CompareSlider.mount(element);   // the box auto() mounted, or a new one
   slider.set(80);         // springs the split to 80
   slider.set(20, true);   // or jumps there
   slider.replay();        // back to rest, then the intro again
   
   element.addEventListener('compareslider:change', (e) => {
     console.log(e.detail.value);   // 0 to 100, once the split is at rest
   });
   
   // When the box leaves the page:
   slider.destroy();   // removes the handle and the listeners

   Show all 16 lines

3. Fit it to your page

   • Structure: one box marked data-compare-slider, with two pictures of the same size as its first two children. The first is the picture before, shown whole; the second is the picture after, laid over the first and clipped at the split. The script adds one element, the handle, as the last child of the box. Anything outside the box is yours; the effect reads no class.
   • What counts as a picture: an img, a picture, a video or a canvas, child of the box. To use anything else, a div with a background for one, mark the two elements data-compare-slider-picture: the first marked is before, the second after.
   • The box needs a width, the pictures a common size. The first picture stays in the flow and gives the box its height; the second is stretched over it with object-fit: cover. The preview's box is aspect-ratio: 4 / 5 and both pictures fill it.
   • One setting for every box of the page, without opening the file: declare window.CompareSliderSettings = { rest: 35 } in a script placed before compare-slider.js. The three levels, least specific first, are DEFAULTS, then that object, then a data-compare-slider-* attribute on the box itself (data-compare-slider-rest="35"), so one box can still differ from the page-wide setting.
   • The two words are settings like the others: data-compare-slider-before="Ivory Laid" and data-compare-slider-after="Kraft Natural" on the box. An empty value takes that tag away, and the rule runs bare.
   • The pointer: with follow on, a mouse over the box carries the split, and leaving sends it back to rest. A press takes the rule for a drag, which goes on outside the box until the button is let go. With follow off, only a press or a drag moves the split, and it stays where it is left.
   • Touch: a finger drags the rule along its axis; a swipe the other way scrolls the page as usual, and the split does not move. A tap sends the split to the point tapped. On touch the split always stays where it is left.
   • Keyboard: the handle is in the tab order. The arrow keys move the split by 2, with Shift or the page keys by 10, Home and End send it to either edge. A value set from the keyboard stays.
   • What a screen reader gets: role="slider", an aria-label made of the two words, aria-orientation, aria-valuenow from 0 to 100 and an aria-valuetext that says the share of each picture. Give both pictures an alt.
   • What the script writes on the box: data-compare-slider-state, live while the split is moving, idle at rest, still under reduced motion; data-compare-slider-axis, x or y; and three custom properties in its style, --compare-slider-at, the split as a percentage, and the two colours. No size and no position in pixels: the split is a share of the box, so a box that changes size keeps it.
   • **From JavaScript, beyond mount, auto and destroy**: the api carries element, settings, handle, value() and position(), where the split is going and where it is, set(value, jump), replay() which plays the intro again, refresh() which reads the settings again, and frames() and isRunning() for a test that wants to see the loop sleep. CompareSlider.replay() plays the intro on every box of the page. The box fires compareslider:change each time the split comes to rest on a new value.
   • **destroy() leaves the box as it was**: the handle removed, the listeners and the observer gone, the attributes and the custom properties taken off, and the loading and draggable of the two pictures put back.
   • **prefers-reduced-motion**: no spring and no intro. The split jumps to the pointer, to the key pressed, and back to rest; the page is complete and the slider fully usable. The state reads still, and turning the preference off brings the spring back without a reload.
   • The words of the markup are the preview's, and they ship as they are. Put the user's own words in their place whenever they want.
   • On Webflow, add the fonts first. Add Geist and Geist Mono to your site's fonts (Site settings, Fonts, Google Fonts) before pasting: the paste names them, and the Designer drops a font the site does not have.

4. Avoid the pitfalls

   • Two pictures of different ratios do not line up. The second is stretched over the box of the first with object-fit: cover, so it is cropped, never squeezed, but the two only register when they share a ratio. Export both at the same size.
   • **Without compare-slider.css the second picture sits under the first.** The stack and the clip are the stylesheet's; the script only moves one custom property.
   • The box clips. It is overflow: hidden, which is what lets a tag leave with the picture it names. A shadow or a badge that should stick out of the frame goes on a wrapper around the box.
   • The handle covers the box. It is the last child and takes the pointer, so a link or a button inside the box cannot be clicked. Captions and actions go beside the box, not in it.
   • A carousel or a horizontal scroller around the box loses the swipe. The box keeps the swipe along its own axis (touch-action: pan-y, or pan-x when vertical). Inside a horizontal carousel, make the slider vertical, or turn follow off and keep it out of the swipe area.
   • **Settings handed to mount() after the page loaded are dropped.** auto() mounts on DOM ready, and mount() on a box that already carries the effect returns the existing one. A page-wide block goes in window.CompareSliderSettings, which auto() reads itself; a box already mounted takes new attributes through refresh().
   • **damping at 0 never settles.** The spring then swings for ever and the loop never sleeps. Keep it over 6.
   • The tags are set in Geist Mono. The stylesheet names it with a fallback stack, so a page without the font shows them in the system mono.

One click on Copy the AI prompt copies everything an assistant needs to build this effect: the complete code, the markup, the dependency, every setting and every pitfall.