画像比較スライダー 2

Easy comparison slider

（Windows Firefox での確認はOK）

<div class="compare">
  <section class="before">
    <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/〜.jpg" alt="" />
  </section>
  <section class="after">
    <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/〜.jpg" alt="" />
  </section>
  <input type="range" id="range" step="0.5">
</div>

<style>
@layer {
  .compare {
    display: grid;    
    > * {
      grid-area: 1 / 1;
    }    
    > section {
      display: grid;
      place-content: center;
    }    
    .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);
    }
    > input[type="range"] {
      z-index: 1;
      appearance: none;
      background: transparent;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      &::-webkit-slider-thumb {
        appearance: none;
        inline-size: 2px; /* 4px */
        block-size: 40dvh;  /* 100dvh */
        background-color: CanvasText;
      }
      &::-moz-range-thumb {
        appearance: none;
        inline-size: 2px; /* 4px */
        block-size: 50dvh;  /* 100dvh */
        background-color: CanvasText;
      }
    }
  }
  img {
    max-block-size: 100%;  /* 80dvh */
    max-inline-size: 100%;
  }
}
@layer .support {
  * {
    box-sizing: border-box;
    margin: 0;
  }
  html {
    block-size: 100%;
    color-scheme: dark light;
  }
  body {
    min-block-size: 100%;
    font-family: system-ui, sans-serif;
    display: grid;
  }
}
</style>

<script>
range.oninput = () =>
  document.body.style.setProperty('--pos', range.value + '%')
</script>

Easy comparison slider