Before and after slider

A visual tool commonly used in various applications to showcase changes or comparisons between two images or states.

Component data

Component resources:
SCSS files | coc-card-item.js

Functional grouping: Media




Responsive preview

Usage best practices

Clear Labels: Clearly label the before and after sections to avoid confusion. Users should easily understand which image represents the "before" state and which one represents the "after" state.