A Comparison Slider

Why/how?

It’s a CSS grid that piles the 2 compared items and a slider on top of each other:

<div class="compare">
  <section class="before">…</section>
  <section class="after">…</section>
  <input type="range" id="range" step="0.1">
</div>

The pile is a great grid technique, assigns all direction children to the same row and column, in which they share and stack to fit.

.compare {
  display: grid;

  > * {
    grid-area: 1 / 1;
  }
}

This stacks the 2 sections and the range input. The next trick maps the range input value to the color hint of a mask for each comparison item:

.compare {
  .before {
    mask: linear-gradient(to right, #000 0, var(--pos, 50%), #0000 0);
  }
  .after {
    mask: linear-gradient(to right, #0000 0, var(--pos, 50%), #000 0);
  }
}

The masks use a hard line and compliment each other while sharing the same slider position. The color hint will move the line of which the mask transitions from visible to invisible.

Posted about it.