Compare two images with a controlled reveal and native adjustable slider.
Apple availability
Import LumenUI in the target that uses this component. iPad support follows the iOS package baseline and uses native iPad layout behavior.
Native example
The value is the visible after fraction, clamped to zero through one; nonfinite input falls back to one half. The application owns image loading, errors, cache, fit and descriptions; provide React Native sources, SwiftUI content builders or Compose painters.
import LumenUI
import SwiftUI
struct CompareEdits: View {
@State private var position = 0.5
var body: some View {
LumenImageComparison("Compare edits", value: $position,
beforeLabel: "Before", afterLabel: "After") {
Image("before").resizable().scaledToFill()
} after: {
Image("after").resizable().scaledToFill()
}
}
}Reference
The primary shared and platform-specific options exposed by LumenImageComparison.
| API | Values or type | Default | Description |
|---|---|---|---|
| _ label | String | Required | Names the adjustable reveal. |
| value | Binding<Double> | Required | Controls the visible after fraction, zero through one. |
| before / after | @ViewBuilder closures | Required | Provides application-owned SwiftUI image content and image fit modifiers. |
| beforeLabel / afterLabel | String | Before / After | Localizes image labels and adjustment state. |
| aspectRatio | CGFloat | 16 / 9 | Accepts 0.1 through 10; otherwise uses 16:9. |
| .environment(\.locale, ...) | Locale | Environment | Formats the percentage. |
| .disabled(...) | Bool | false | Disables the native slider while preserving images. |
Native behavior
The value is the visible after fraction, clamped to zero through one; nonfinite input falls back to one half. The application owns image loading, errors, cache, fit and descriptions; provide React Native sources, SwiftUI content builders or Compose painters.
Exposes a named native slider with localized percentage state for touch, keyboard, and screen-reader adjustment.
Shared component