Early accessBlack Friday: 20% off new projects with Codevibe, plus 20% off Hostinger hosting. Get your codeBlack Friday: 20% off. Get your code
Web DevelopmentScalable web apps, built fastMobile DevelopmentiOS & Android, one codebaseCloud & DevOpsInfrastructure that scalesAI & AutomationProduction-grade AI, measurableUI/UX DesignDesign that convertsSEO & GEOFound on Google and in AI
AboutContact
Book a scoping callhello@codevibe.in+91 70677 09224

Comparison

Before / after

The comparison everyone knows: a sketch becomes a painting across a divider. Own build with a real native control and ARIA.

Free codeMIT licenceKeyboard accessible
Download ZIP

How to play

Drag the divider left and right.

Keyboard

Tab to the slider, then ← → to step, PgUp PgDn to jump, Home End for the ends.

Under the surface

A native range input is the real control: it owns the value, the keyboard and what screen readers hear. Everything you see is drawn from it.

What it needs

No libraries, just HTML, CSS and JavaScript

The concept

What Before / after really is.

The classic before and after: drag a divider to reveal one version over another. It also has press-and-hold and split-view modes.

Where to use it

5 real-world places this slider fits, from product UIs to marketing pages.

  1. 01

    Photo-editing products

    Showing the effect of a filter, retouch or AI upscale.

  2. 02

    Home improvement and cleaning

    Before and after service results.

  3. 03

    Medical and dental clinics

    Treatment results, with consent.

  4. 04

    Map and GIS tools

    Comparing satellite images over time.

  5. 05

    UI redesign case studies

    Old versus new interface comparisons.

Implementation

The source, ready to copy.

Two files and a small shared scaffold. Copy them, or take the whole package.

ZIP

Loading slider.js…

Plain HTML, CSS and JavaScript · no build step · MIT licenceThe ZIP adds a standalone demo page, a React wrapper and the licence file

Work with Codevibe

Like the Before / after? We can build it for you.

If this design fits your product, we are happy to adapt it to your brand, or design something new that feels just as good to use. The same team that made this library builds websites, apps and product UIs that people enjoy using.

  • Custom interactions designed around your brand and your users, not a template.
  • Built properly: fast, responsive and accessible, like every slider here.
  • From one component to a full product: websites, web apps, mobile apps and design systems.

Just want this slider? Download the code free, no form needed.

What are you building?

1 / 3

Two taps. A senior engineer, not a salesperson, reads this.

Project
When do you want to start?

NDA on request before detailed scoping. Your details are used only to reply. Privacy

More sliders

All 39 sliders →
Comparison · original

Radial Wipe

Compare by sweeping a clock hand: a blueprint becomes the built house in the sector you have swept.

Sweep the clock hand around the discExplore Radial Wipe →
Comparison · original

Triptych

Three states of one scene side by side: two dividers, three panels, one picture across the seasons.

Drag two dividers to compare three versionsExplore Triptych →
Traditional Value

Lamp dimmer

The baseline every other slider inherits, presented as a lamp dimmer: one native range, a filled track, a value tooltip.

Drag the thumb to dim the lampExplore Lamp dimmer →
// LET'S BUILD SOMETHING

Ready to build?

Tell us what you are working on. We will respond within 12 hours on working days with an honest assessment and a recommended path forward.

Call +91 70677 09224
hello@codevibe.in · +91 70677 09224 · Gurugram, India