Image Compare¶

marimo.image_compare ¶

image_compare(before_image: ImageLike, after_image: ImageLike, value: float = 50, direction: Literal['horizontal', 'vertical'] = 'horizontal', width: Optional[Union[int, str]] = None, height: Optional[Union[int, str]] = None) -> Html

Render an image comparison slider to compare two images side by side.

Examples:

# Basic usage with two images
mo.image_compare(before_image="before.jpg", after_image="after.jpg")

# With custom settings
mo.image_compare(
    before_image="original.png",
    after_image="processed.png",
    value=30,  # Initial slider position at 30%
    direction="vertical",
    width=500,
    height=400,
)

PARAMETER	DESCRIPTION
`before_image`	The "before" image to show in the comparison slider. Can be a path, URL, or array-like object. TYPE: `ImageLike`
`after_image`	The "after" image to show in the comparison slider. Can be a path, URL, or array-like object. TYPE: `ImageLike`
`value`	Initial position of the slider (0-100), defaults to 50. TYPE: `float` DEFAULT: `50`
`direction`	Orientation of the slider, either "horizontal" or "vertical". Defaults to "horizontal". TYPE: `Literal['horizontal', 'vertical']` DEFAULT: `'horizontal'`
`width`	Width of the component in pixels or CSS units. TYPE: `Optional[Union[int, str]]` DEFAULT: `None`
`height`	Height of the component in pixels or CSS units. TYPE: `Optional[Union[int, str]]` DEFAULT: `None`

RETURNS	DESCRIPTION
`Html`	`Html` object with the image comparison slider.