After & Before Slider

Hi there! I am trying to create an after and before image slider to showcase an before and after image of my photography works. Is there anyway that this is possible in Squarespace 7.1? If so, can anyone upload a tutorial on how to do so? Thank you very very much in advance. 🙂

You mean something like this? 

https://thung.squarespace.com/before-after?noredirect

Pass: abc

or like this?

https://codepen.io/karto/pen/QwKwLv

On 5/14/2022 at 1:28 AM, tuanphan said:

You mean something like this? 

https://thung.squarespace.com/before-after?noredirect

I'm looking for something exactly like this. How did you do it?

On 1/6/2023 at 10:39 PM, scdesign said:

I'm looking for something exactly like this. How did you do it?

Hi,

It is plugin. https://www.will-myers.com/products/p/before-/-after-image-slider

@tuanphanWould you know where exactly to copy/paste these blocks of code into SquareSpace to get this particular before/after slider to work? Seems like the code is here, I just don't know how to add it to my site.

https://codepen.io/josephwong2004/pen/NWRGxdR

On 1/24/2023 at 9:41 AM, Sebbo said:

@tuanphanWould you know where exactly to copy/paste these blocks of code into SquareSpace to get this particular before/after slider to work? Seems like the code is here, I just don't know how to add it to my site.

https://codepen.io/josephwong2004/pen/NWRGxdR

Edit page where you want to place this > Add a Code Block > Paste this code into Code BLock

<div class='container1'>
    <div class='img background-img'></div>
    <div class='img foreground-img'></div>
    <input type="range" min="1" max="100" value="50" class="slider" name='slider' id="slider">
    <div class='slider-button'></div>
  </div>
<style>
  .container1 {
  position: relative;
  width: 900px;
  height: 600px;
  border: 2px solid white;
}
.container1 .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 900px 100%;
}
.container1 .background-img {
  background-image: url("https://i.imgur.com/s08MkXC.jpg");
}
.container1 .foreground-img {
  background-image: url("https://i.imgur.com/PfIWek4.jpg");
  width: 50%;
}
.container1 .slider {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: rgba(242, 242, 242, 0.3);
  outline: none;
  margin: 0;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container1 .slider:hover {
  background: rgba(242, 242, 242, 0.1);
}
.container1 .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}
.container1 .slider::-moz-range-thumb {
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}
.container1 .slider-button {
  pointer-events: none;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.container1 .slider-button:after {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}
.container1 .slider-button:before {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
  $("#slider").on("input change", (e)=>{
  const sliderPos = e.target.value;
  // Update the width of the foreground image
  $('.foreground-img').css('width', `${sliderPos}%`)
  // Update the position of the slider button
  $('.slider-button').css('left', `calc(${sliderPos}% - 18px)`)
});
</script>