AI Components / Transform Slider
Transform Slider
Before/after image comparison slider with draggable divider, clip-path overlay, smooth transitions, keyboard arrows, and pointer capture. Horizontal and vertical orientations.
ai-viz v0.6.0
Playground
Examples
Horizontal
<ai-transform-slider beforeSrc="https://picsum.photos/seed/origA/500/300" afterSrc="https://picsum.photos/seed/enhA/500/300" beforeLabel="Original" afterLabel="Enhanced" style="max-width:500px;"></ai-transform-slider>Vertical
<ai-transform-slider beforeSrc="https://picsum.photos/seed/origB/400/300" afterSrc="https://picsum.photos/seed/enhB/400/300" beforeLabel="Before" afterLabel="After" orientation="vertical" style="max-width:400px;"></ai-transform-slider>Import
import { AiTransformSlider } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-transform-slider';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
beforeSrc | string | — | Before image URL |
afterSrc | string | — | After image URL |
beforeLabel | string | "Before" | Before label |
afterLabel | string | "After" | After label |
position | number | 50 | Divider position 0-100 |
orientation | "horizontal"|"vertical" | "horizontal" | Slider orientation |
rounded | "none"|"sm"|"md"|"lg" | "lg" | Border radius variant |
Events
| Event | Detail | Description |
|---|---|---|
ai-transform-change | {position} | Slider position changed |