Return to the GitHub repository.
The examples below are in order of implementation complexity from least to most. All are using is-land
, specifically <is-land on:visible>
. The pre-JS experience is emulated using <is-land on:media="(max-width: 0px)">
.
@value="0"
or @value="100"
respectively.:has()
and Radios approach.:not(:defined)
CSS<template>
:has()
and Radiosopacity
Slider<!-- WebC Component HTML -->
<image-compare-enabled @name="range-enabled" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-enabled>
<!-- WebC Component HTML -->
<image-compare-disabled @name="range-disabled" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-disabled>
:not(:defined)
to hide the range input before JS.<!-- WebC Component HTML -->
<image-compare-defined @name="range-hidden" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-defined>
<template>
content holding the range input.<!-- WebC Component HTML -->
<image-compare-hidden @name="range-hiddentmpl" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-hidden>
<!-- WebC Component HTML -->
<image-compare-shadowdom @name="range-shadowdom" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-shadowdom>
:has()
and Radios:has
and radios for a functional No-JS experience (and synchronizes the value pre-JS and post-JS). Of course, the number of radios shown can be customized.:has()
is not supported (at time of writing, Firefox), the inputs are hidden (though you could modify this behavior to be Always Enabled and synchronized).<!-- WebC Component HTML -->
<image-compare-nojs @name="range-radios" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-nojs>
For fun you can change clip-path: inset(0 0 0 var(--position));
to opacity: var(--position);
on any of these components to have the slider vary opacity instead of clip amount.
<!-- WebC Component HTML -->
<image-compare-defined @name="range-opacity" @value="50">
<img src="/javaskipped-a.png" alt="JavaSkipped logo left" width="800" height="800" loading="lazy" style="clip-path: none; opacity: var(--position);">
<img src="/javaskipped-b.png" alt="JavaSkipped logo right" width="800" height="800" loading="lazy">
</image-compare-defined>