lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

Image Comparer

Before/after image comparison slider with vertical mode.

The <luna-image-comparer> component displays a before/after image comparison slider with horizontal and vertical modes.

Paths

/lunadom/components/image-comparer/image-comparer.js REQUIRED

Horizontal (Default)

Old architecture Old architecture B&W

Vertical

Landscape Landscape Sepia

Customization

Slots
before - Before image element
after - After image element
Attributes
vertical - Use vertical slider instead of horizontal
position - Initial percentage position of the slider (0 to 100)
CSS Variables
--luna-compare-handle-bg - Background color of the slider knob
--luna-compare-handle-color - Icon color inside the slider knob
--luna-compare-line-color - Color of the divider line
--luna-compare-size - Diameter of the slider knob
--luna-radius - Border radius applied to the entire component

Example Code

<!-- Horizontal --> <luna-image-comparer> <img slot="before" src="before.jpg" alt="Before" /> <img slot="after" src="after.jpg" alt="After" /> </luna-image-comparer> <!-- Vertical --> <luna-image-comparer vertical> <img slot="before" src="before.jpg" alt="Before" /> <img slot="after" src="after.jpg" alt="After" /> </luna-image-comparer>