Image Comparison Slider

<!-- Image Comparison Slider — the range thumb's box-shadow paints
     the "before" curtain, so no JS is needed to sync a second layer.
     Swap the frame's background + thumb box-shadow color for real photos. -->
<div class="nuda-co2-compare-slider">
  <div class="nuda-co2-compare-slider__frame">
    <span class="nuda-co2-compare-slider__label nuda-co2-compare-slider__label--before">Before</span>
    <span class="nuda-co2-compare-slider__label nuda-co2-compare-slider__label--after">After</span>
    <input class="nuda-co2-compare-slider__range" type="range" min="0" max="100" value="55"
           aria-label="Comparison position" />
  </div>
</div>

.nuda-co2-compare-slider {
  --nuda-co2-cs-accent: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 280px;
  font-family: inherit;
}

.nuda-co2-compare-slider__frame {
  position: relative;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg,#3a3f22,#1c1f10);
}

.nuda-co2-compare-slider__label {
  position: absolute;
  top: 8px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #f2f2f2;
  background: rgba(0,0,0,.5);
  padding: 2px 8px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 2;
}

.nuda-co2-compare-slider__label--before {
  left: 8px;
}

.nuda-co2-compare-slider__label--after {
  right: 8px;
}

.nuda-co2-compare-slider__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 150px;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
  accent-color: var(--nuda-co2-cs-accent);
  z-index: 3;
}

.nuda-co2-compare-slider__range::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: transparent;
  height: 150px;
}

.nuda-co2-compare-slider__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 4px;
  height: 150px;
  border-radius: 0;
  background: var(--nuda-co2-cs-accent);
  box-shadow: -1000px 0 0 1000px #17171a,0 0 0 2px rgba(9,9,11,.5);
  cursor: ew-resize;
}

.nuda-co2-compare-slider__range::-moz-range-track {
  background: transparent;
  height: 150px;
  border: none;
}

.nuda-co2-compare-slider__range::-moz-range-thumb {
  width: 4px;
  height: 150px;
  border: none;
  border-radius: 0;
  background: var(--nuda-co2-cs-accent);
  box-shadow: -1000px 0 0 1000px #17171a;
}

.nuda-co2-compare-slider__range:focus-visible {
  outline: 2px solid var(--nuda-co2-cs-accent);
  outline-offset: -2px;
  border-radius: 12px;
}

@media (prefers-reduced-motion:reduce) {
  .nuda-co2-compare-slider__frame {
    transition: none;
  }
}