<div id="slider" class="beer-slider" data-start="75">
  <div class="ctnr ctnr-winter">
    <svg class="winter" width="100%" height="100%" viewBox="0 0 600 361" preserveAspectRatio="xMidYMid slice" data-beer-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/original-baltic.jpg" aria-labelledby="title1" aria-role="img">
      <title id="title1">Baltic seashore -sepicol</title>
      <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/winter.jpg" x="0" y="0" width="100%" height="100%"></image>

    </svg>
    <section class="b b2">
      <h2>Baltic sea during Winter time</h2>
      <p>At -10.6 °C | 12.9 °F on average, January is the coldest month of the year. It is also the driest month. There is 12 mm | 0.5 inch of precipitation in January.</p>
    </section>

  </div>
  <div class="beer-reveal">
    <div class="ctnr ctnr-summer">
      <svg width="100%" height="100%" viewBox="0 0 600 361" preserveAspectRatio="xMidYMid slice" data-beer-src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/warmsphere-baltic.jpg" aria-labelledby="title2" aria-role="img">
        <title id="title2">Baltic seashore - warmshphere preset applied</title>
        <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74321/warmsphere-baltic.jpg" x="0" y="0" width="100%" height="100%"></image>
      </svg>
      <section class="b b1">
        <h2>Baltic sea during Summer time</h2>
        <p>With an average of 22.8 °C | 73.0 °F, July is the warmest month. In June, the precipitation reaches its peak, with an average of 98 mm | 3.9 inch.</p>

      </section>
    </div>

  </div>

</div>

<main>
  <h1>Welcome to the Baltic seaside</h1>
  <p>The Baltic Sea is a mediterranean sea of the Atlantic Ocean, enclosed by Denmark, Estonia, Finland, Latvia, Lithuania, Sweden, northeast Germany, Poland, Russia and the North and Central European Plain. The sea stretches from 53°N to 66°N latitude and from 10°E to 30°E longitude.</p>
</main>
<svg>
  <defs>
    <clipPath id="svgPath" clipPathUnits="objectBoundingBox" transform="scale(0.00083 0.0075)">
      <path d="M1397,490H204c263,0,160-32,371-33,191.52-.91,150.49-135.14,225-92C990,475,1144,490,1397,490Z" transform="translate(-178 -350.46)" />
    </clipPath>
  </defs>
</svg>

.beer-slider {
  *,
  &:before,
  &:after,
  *:before,
  *:after {
    box-sizing: border-box;
  }
  display: inline-block;
  position: relative;
  overflow: hidden;

  svg {
    vertical-align: bottom;
  }
}
.beer-reveal {
  --width: 50%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  clip-path: polygon(0 0, var(--width) 0, var(--width) 100%, 0 100%);
  overflow: hidden;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.35s;
}

.beer-range {
  position: absolute;
  z-index: 2;
  bottom: 0;
  height: 6rem;
  margin: 0;
  left: -1px;
  width: calc(100% + 2px);
  cursor: pointer;
  -webkit-appearance: slider-horizontal !important;
  -moz-appearance: none;
  opacity: 0;
  -ms-touch-action: auto;
  touch-action: auto;

  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 300vh;
  }
  &::-moz-range-thumb {
    -webkit-appearance: none;
    height: 300vh;
  }
  &::-ms-tooltip {
    display: none;
  }
}

.beer-ready {
  &,
  image,
  .beer-reveal,
  .beer-handle {
    opacity: 1;
  }
}

.beer-slider {
  width: 100%;
  height: 70vh;
}
.ctnr {
  height: 70vh;
}

.beer-handle {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: white;
  color: #000;
  transition: opacity 1s;
  transform: translateX(-50%);
  height: 6rem;
  width: 100%;
  left: 50%;
  bottom: 0;
  clip-path: url(#svgPath);
  &:before,
  &:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    border-top: solid 2px;
    border-left: solid 2px;
    transform-origin: 0 0;
  }
  &:before {
    left: calc(50% - 20px);
    transform: rotate(-45deg);
  }
  &:after {
    right: calc(50% - 30px);
    transform: rotate(135deg);
  }
}

body {
  font-family: Poppins, sans-serif;
  line-height: 1.6;
}

h1,
h2 {
  font-family: Calistoga;
  font-weight: 400;
}
h1 {
  margin: 0;
}
h2 {
  font-size: 4rem;
  line-height: 1;
}
.b {
  position: absolute;
  top: 2rem;
  width: 50%;
  max-width: 700px;
}
.b * {
  opacity: 0;
  transform: translate3d(0, 2rem, 0);
  transition: 1s;
}
.b1 {
  left: 4rem;
  z-index: 1;
  color: white;
}
.b2 {
  right: 4rem;
  z-index: 1;
}

.more .b1 * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.less .b2 * {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.ctnr:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.ctnr-summer:after {
  background: linear-gradient(135deg, #2a2d4e, transparent);
}

.ctnr-winter:after {
  background: linear-gradient(-135deg, white, transparent);
}

image {
  transition: 0.6s;
  opacity: 0;
}

p {
  letter-spacing: 1px;
}

@media (max-width: 37.5em) {
  h2 {
    font-size: 2rem;
  }
  .b1 {
    left: 2rem;
  }
  .b2 {
    right: 2rem;
  }
  .ctnr-summer:after {
    background: linear-gradient(180deg, #2a2d4e, transparent 120%);
  }
}

main {
  margin: 2rem auto;
  max-width: 48rem;
  padding: 0 1rem;
}

class BeerSlider {
  constructor(element, { start = "50" } = {}) {
    this.start = parseInt(start)
      ? Math.min(100, Math.max(0, parseInt(start)))
      : 50;
    this.element = element;
    this.revealContainer = this.element.children[1];
    this.revealElement = this.revealContainer.children[0];
    this.range = this.addElement("input", {
      type: "range",
      class: `beer-range`,
      "aria-label": "Percent of revealed content",
      "aria-valuemin": "0",
      "aria-valuemax": "100",
      "aria-valuenow": this.start,
      value: this.start,
      min: "0",
      max: "100"
    });
    this.handle = this.addElement("span", {
      class: `beer-handle`
    });
    this.onImagesLoad();
  }
  init() {
    this.element.classList.add(`beer-ready`);
    this.move();
    this.addListeners();
  }
  loadingImg(src) {
    return new Promise((resolve, reject) => {
      if (!src) {
        resolve();
      }
      const img = new Image();
      img.onload = () => resolve();
      img.onerror = () => reject();
      img.src = src;
    });
  }
  loadedBoth() {
    const mainImageSrc =
      this.element.children[0].src ||
      this.element.children[0].getAttribute(`data-beer-src`);
    const revealImageSrc =
      this.revealElement.src ||
      this.revealElement.getAttribute(`data-beer-src`);
    return Promise.all([
      this.loadingImg(mainImageSrc),
      this.loadingImg(revealImageSrc)
    ]);
  }
  onImagesLoad() {
    if (!this.revealElement) {
      return;
    }
    this.loadedBoth().then(
      () => {
        this.init();
      },
      () => {
        console.error("Some errors occurred and images are not loaded.");
      }
    );
  }
  addElement(tag, attributes) {
    const el = document.createElement(tag);
    Object.keys(attributes).forEach((key) => {
      el.setAttribute(key, attributes[key]);
    });
    this.element.appendChild(el);
    return el;
  }
  addListeners() {
    const eventTypes = ["input", "change"];
    eventTypes.forEach((i) => {
      this.range.addEventListener(i, () => {
        this.move();
      });
    });
  }
  move() {
    this.revealContainer.style.setProperty("--width", `${this.range.value}%`);
    this.handle.style.left = `${this.range.value}%`;
    this.range.setAttribute("aria-valuenow", this.range.value);
    if (this.range.value > 55) {
      this.element.classList.add("more");
    } else {
      this.element.classList.remove("more");
      if (this.range.value < 45) {
        this.element.classList.add("less");
      } else {
        this.element.classList.remove("less");
      }
    }
  }
}

new BeerSlider(document.getElementById("slider"), { start: 30 });