Free Framer component
Slide To Compare
A before and after image slider. Put two images on top of each other and drag the handle to compare them. You set the direction, the handle and the labels in Framer’s right panel.
Drag the handle, or click anywhere on the photo. With the keyboard: Tab to the handle, then use the arrow keys.
Set it up your way
Sketch and finished room, raw and edited photo, day and night. Change the direction, the handle and how it moves in the right panel.
Ring handle
Sketch and finished room, with labels you name yourself.
Vertical
Slide from top to bottom. Labels at the side you choose.
Follows the mouse
Move the mouse over the photo, no clicking. Line only, no labels.
Details
Drag, click or hover
Drag the handle, click to jump, or let it follow the mouse. On touch screens it is always drag.
Page scroll still works
On phones, swiping up and down over the slider still scrolls the page.
Keyboard and screen readers
Arrow keys move it, Home and End jump to the ends. It is announced as a slider with its own label.
A nudge to show it moves
It slides a little once when it comes into view. Visitors who turn off motion don’t see it.
Horizontal or vertical
Compare side to side, or top to bottom.
Your handle and labels
Arrows, circle, ring or line only. Your own label text, font and colors.
Settings
Before / After
The two images. Use images of the same size so they line up.
Direction / Start
Horizontal or vertical, and where the handle starts (0 to 100%).
Ratio
Free fills the frame you draw. Pick 3:2, 4:3, 16:9, 1:1 or 4:5 and set the height to Fit: the height follows the width.
Move
Drag, or Hover to follow the mouse. Touch screens always drag.
Hint
Nudge once when it comes into view, or none.
Fit / Radius
Fill or fit the images, and round the corners.
Labels
Show or hide, your own text, the side, the font and the colors.
Handle
Arrows, circle, ring or line only. Size, line width, colors and shadow.
Screen reader
The name the slider is read out with.
How to use it
01
Open the component on the Framer Marketplace and copy it.
02
Paste it on any page of your Framer project (⌘V).
03
Change the settings in the right panel. Preview to see it move.
From the same maker
Framer templates by H SHIFT WORKS
CIRCLED
Booking site for portrait and wedding photographers.
View template →
AGENDA
Conference site with schedule, speakers and venue.
View template →
OFFSET
Studio site for an independent digital agency.
View template →
TRUSS
Site for renovation and design-build companies.
View template →
GAZE
Dark, photo-led portfolio for one visual artist.
View template →
© 2026 H SHIFT WORKS. Framer templates, plugins and components.
framer.com/@hshiftworks
X: @hshiftworks