What it looks like
It works like two printed photos stacked together, with a vertical curtain you pull sideways. Left of the line you see the first version; right of it, the second. The line has an indigo glow that fades at the ends, a light blue halo on one side and a dust of tiny white stars twinkling next to it, with a small white handle in the middle. In the default mode the line follows the mouse and returns to the center when it leaves; in drag mode you click and pull. In autoplay, the line sweeps from edge to edge in five seconds and back, stopping when the mouse enters.
You may be looking for this if you asked for something like
- compare before and after by dragging a line across the photo
- show treatment results with before and after photos
- an image that changes as I move the mouse from side to side
- compare the old site with the new one on the same screen
- that before and after slider clinics use
- show the light and dark versions of my app in one frame
- compare two code snippets with a sliding divider
Also known as
- before and after slider
- image comparison slider
- compare slider
- image compare
- split view slider
- reveal slider
When to use
- Results of cosmetic, dental or renovation work
- A website or app redesign, showing the old and new versions
- Light and dark themes of the same product
- Photo editing, filters or image restoration
- Code changes, with the previous and the fixed version
When to avoid
- Comparisons that must work from the keyboard, since the line only moves with mouse or touch
- Images with different proportions or framing, which misalign at the divider
How to ask your AI
Create a before and after comparison slider for treatment results: two stacked photos and a line people drag with the mouse or a finger, with arrow key control, my brand colors on the line, optimized images and a version without the animated glow for reduced motion.
With THM Componentes, you paste the full prompt from the catalog together with this component's code, and the AI reproduces this exact effect instead of improvising.
Questions about Retoque
Does Retoque work on phones?
Yes. Retoque listens to touch events, so the line follows a finger sliding over the image, in both hover and drag modes. With autoplay on, touch is ignored and the line keeps sweeping by itself. The default size is 400 by 400 pixels, so adjust the classes for narrow screens.
Can Retoque show something other than images?
Yes. Besides the image props, Retoque has first-content and second-content slots that take any content at the component's full width and height, such as app screens, code snippets or colored blocks. The handle slot replaces the middle handle with your own.
Can Retoque be used with the keyboard?
Not out of the box. Retoque does not take focus or respond to arrow keys, so people who browse without a mouse cannot move the line. Ask your AI for keyboard control, such as a hidden range input or a role slider with aria-valuenow, tied to the same percentage the component already emits.
