Trying to create a custom "Before/After" slider with code. Cannot get the slider to work at all. Images display fine.

Cannot seem to get the slider to work no matter what I do. Images display fine (half and half on start).

Custom CSS within website tools:

.custom-image-slider {
  position: relative;
  width: 100%;
  max-width: 1000px; /* Adjust the max width as needed */
  height: auto;
  margin: 0 auto;
  overflow: hidden;
}

.custom-image-slider img {
  width: 100%;
  height: auto;
  display: block;
}

.slider-handle {
  position: absolute;
  top: 0;
  left: 50%;
  width: 4px;
  height: 100%;
  background-color: #fff;
  z-index: 3;
  cursor: ew-resize;
}

.slider-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0 50% 0 0);
  z-index: 2;
}
 

Custom HTML/JS in code block on desired page:

<div class="custom-image-slider">
  <img class="slider-before" src="(url of image not included here)" alt="Before">
  <img class="slider-after" src="(url of image not included here)">
  <div class="slider-handle"></div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const slider = document.querySelector(".custom-image-slider");
  const handle = slider.querySelector(".slider-handle");
  const afterImage = slider.querySelector(".slider-after");

  let isDragging = false;

  handle.addEventListener("mousedown", function() {
    isDragging = true;
    document.body.style.cursor = 'ew-resize';
  });

  document.addEventListener("mouseup", function() {
    isDragging = false;
    document.body.style.cursor = 'default';
  });

  document.addEventListener("mousemove", function(e) {
    if (!isDragging) return;

    const rect = slider.getBoundingClientRect();
    let offsetX = e.clientX - rect.left;

    if (offsetX < 0) offsetX = 0;
    if (offsetX > rect.width) offsetX = rect.width;

    const percentage = (offsetX / rect.width) * 100;

    handle.style.left = `${percentage}%`;
    afterImage.style.clipPath = `inset(0 ${100 - percentage}% 0 0)`;
  });
});
</script>
 

I would love to get this to work as well without paying for a widget. Did you find an answer?

16 hours ago, julesgilleland said:

I would love to get this to work as well without paying for a widget. Did you find an answer?

You can use these options

Option 1. 

Option 2. Add a Code Block > Use this code

Replace example image url in code with your desired image url

<div class="containerBA">
									<div class="image-container">
									<img
										class="image-before slider-image"
									src="https://images.squarespace-cdn.com/content/v1/64fb100cb3e29676aa4a5c2e/782af322-5036-44dc-ad41-b1432e68dc7c/rdnfikdvbol.png"
										alt="before"
									/>
									<img
										class="image-after slider-image"
										src="https://images.squarespace-cdn.com/content/v1/64fb100cb3e29676aa4a5c2e/2a25d7b8-93dd-40af-9deb-940222f4739f/1000014477.png"
										alt="after"
									/>
									</div>
									<!-- step="10" -->
									<input
									type="range"
									min="0"
									max="100"
									value="50"
									aria-label="Percentage of before photo shown"
									class="slider"
									/>
									<div class="slider-line" aria-hidden="true"></div>
									<div class="slider-button" aria-hidden="true">
									<svg
										xmlns="http://www.w3.org/2000/svg"
										width="30"
										height="30"
										fill="currentColor"
										viewBox="0 0 256 256"
									>
										<rect width="256" height="256" fill="none"></rect>
										<line
										x1="128"
										y1="40"
										x2="128"
										y2="216"
										fill="none"
										stroke="currentColor"
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="16"
										></line>
										<line
										x1="96"
										y1="128"
										x2="16"
										y2="128"
										fill="none"
										stroke="currentColor"
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="16"
										></line>
										<polyline
										points="48 160 16 128 48 96"
										fill="none"
										stroke="currentColor"
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="16"
										></polyline>
										<line
										x1="160"
										y1="128"
										x2="240"
										y2="128"
										fill="none"
										stroke="currentColor"
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="16"
										></line>
										<polyline
										points="208 96 240 128 208 160"
										fill="none"
										stroke="currentColor"
										stroke-linecap="round"
										stroke-linejoin="round"
										stroke-width="16"
										></polyline>
									</svg>
									</div>
								</div>

                               <script>
const container = document.querySelector('.containerBA');
document.querySelector('.slider').addEventListener('input', (e) => {
  container.style.setProperty('--position', `${e.target.value}%`);
})

  </script>