before and after slide

[Ecomowner]

Does anyone know the code to make a before after slide with the following information, i want the image surrounded by four icons with benefit points. Below is all the info. I am looking to add to the before and after slider

[Small_Task_Help]

Hi,

Hope this will help

- Need to add new section
code example

<!-- before-after-slider.liquid -->

<div class="before-after-container">
  <div class="before-after-wrapper">
    <div class="before-after-slider">
      <img src="https://community.shopify.com/c/image/serverpage/image-id/570581i17F7227B076129E7/image-size/large?v=v2&px=999" class="before-img" />
      <img src="https://community.shopify.com/c/image/serverpage/image-id/570585i99140C6A0D5A13A4/image-size/large?v=v2&px=999" class="after-img" />
      <input type="range" min="0" max="100" value="50" class="slider" />
    </div>
    <!-- Icons with benefits -->
    <div class="icon-box top-left">🌟 Benefit 1</div>
    <div class="icon-box top-right">💧 Benefit 2</div>
    <div class="icon-box bottom-left">⚡ Benefit 3</div>
    <div class="icon-box bottom-right">🛡️ Benefit 4</div>
  </div>
</div>

<style>
.before-after-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: auto;
}

.before-after-wrapper {
  position: relative;
}

.before-after-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.before-img,
.after-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.after-img {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0.3s ease;
}

.slider {
  width: 100%;
  position: absolute;
  bottom: -30px;
}

.icon-box {
  position: absolute;
  background: white;
  padding: 8px 10px;
  border-radius: 8px;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(0,0,0,0.1);
}

.top-left { top: 10px; left: 10px; }
.top-right { top: 10px; right: 10px; }
.bottom-left { bottom: 10px; left: 10px; }
.bottom-right { bottom: 10px; right: 10px; }
</style>

<script>
document.querySelector('.slider').addEventListener('input', function(e) {
  const sliderValue = e.target.value;
  document.querySelector('.after-img').style.clipPath = `inset(0 ${100 - sliderValue}% 0 0)`;
});
</script>