.container {
  position: relative;
  width: 1160px;
  max-width: 100%;
}

/* both images always identical size */
.base,
.top {
  width: 100%;
  display: block;
}

/* bottom image (background) */
.base {
  position: relative;
}

/* top image = clipped layer */
.top {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: auto;

  display: block;

  /* default state (JS overrides this) */
  clip-path: inset(0 50% 0 0);
}

/* slider overlay on image */
#slider {
  position: absolute;

  bottom: 10px;     /* inside image */
  left: 0;

  width: 100%;
  z-index: 10;

  cursor: ew-resize;

  /* optional styling so it looks visible */
  background: rgba(255, 255, 255, 0.2);
}

/* optional: make slider nicer (Chrome/Safari) */
#slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}

/* optional: Firefox thumb */
#slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  cursor: pointer;
}