ImageComparison

---
import { Image, ImageComparison } from '@santi020k/lumen-astro'
---

<ImageComparison afterLabel="Color adjusted" beforeLabel="Original" label="Compare the landscape treatment" ratio={1.6} value={50}>
  <Image slot="before" alt="A muted landscape illustration with mountains and a lake" height={600} radius="none" src="/comparison-before.svg" width={960} />
  <Image slot="after" alt="The same landscape illustration with warmer light and deeper color" height={600} radius="none" src="/comparison-after.svg" width={960} />
  <p>Illustrative color treatment. Move the control to compare the same framing.</p>
</ImageComparison>

import { Image, ImageComparison } from '@santi020k/lumen-react'

export const Example = () => (
  <ImageComparison
    label="Compare the landscape treatment"
    beforeLabel="Original"
    afterLabel="Color adjusted"
    ratio={1.6}
    defaultValue={50}
    before={<Image alt="Original landscape illustration" src="/comparison-before.svg" />}
    after={<Image alt="Color-adjusted landscape illustration" src="/comparison-after.svg" />}
  />
)

<script type="module">
  import { defineLumenElements } from '@santi020k/lumen-elements/define'

  defineLumenElements()
</script>

<lumen-image-comparison
  label="Compare the landscape treatment"
  before-label="Original"
  after-label="Color adjusted"
  ratio="1.6"
  value="50"
>
  <img slot="before" alt="Original landscape illustration" src="/comparison-before.svg" width="960" height="600" />
  <img slot="after" alt="Color-adjusted landscape illustration" src="/comparison-after.svg" width="960" height="600" />
  <p>Illustrative color treatment with matching framing.</p>
</lumen-image-comparison>