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>

Thanks tuanphan! I am having trouble with having more that one before/after slider on a page.

When I have two sliders on a page, the new slider block replaces the first slide block, so they both ending up being the same photos and slide in unison when published. (Hope that makes sense) 

Can I have more than one slider on a page? If so, how do I do this? Thank you!

On 6/30/2023 at 10:41 AM, bdaulby said:

Thanks tuanphan! I am having trouble with having more that one before/after slider on a page.

When I have two sliders on a page, the new slider block replaces the first slide block, so they both ending up being the same photos and slide in unison when published. (Hope that makes sense) 

Can I have more than one slider on a page? If so, how do I do this? Thank you!

Try this code on Code Block 2

<div class='container2'>
    <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="slider2">
    <div class='slider-button'></div>
  </div>
<style>
  .container2 {
  position: relative;
  width: 900px;
  height: 600px;
  border: 2px solid white;
}
.container2 .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: 900px 100%;
}
.container2 .background-img {
  background-image: url("https://i.imgur.com/s08MkXC.jpg");
}
.container2 .foreground-img {
  background-image: url("https://i.imgur.com/PfIWek4.jpg");
  width: 50%;
}
.container2 .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;
}
.container2 .slider:hover {
  background: rgba(242, 242, 242, 0.1);
}
.container2 .slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}
.container2 .slider::-moz-range-thumb {
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}
.container2 .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;
}
.container2 .slider-button:after {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}
.container2 .slider-button:before {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}
</style>
<script>
  $("#slider2").on("input change", (e)=>{
  const sliderPos2 = e.target.value;
  // Update the width of the foreground image
  $('.foreground-img').css('width', `${sliderPos2}%`)
  // Update the position of the slider button
  $('.slider-button').css('left', `calc(${sliderPos2}% - 18px)`)
});
</script>

Thanks for your help tuanphan

I just tried your code for the second slider block and the same thing keeps happening (sliders still move at the same time.) Super strange! 

Any other ideas on how to fix this? Thanks again!

On 7/2/2023 at 8:30 AM, bdaulby said:

Thanks for your help tuanphan

I just tried your code for the second slider block and the same thing keeps happening (sliders still move at the same time.) Super strange! 

Any other ideas on how to fix this? Thanks again!

Try change this line in second code

 $('.foreground-img').css('width', `${sliderPos2}%`)

to this

 $('#slider2 .foreground-img').css('width', `${sliderPos2}%`)

On 1/26/2023 at 6:09 PM, tuanphan said:

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>

 

This code works amazing, thank you @tuanphan. Just one question, is it possible to make it scale for mobile?

Thank you!

On 7/26/2024 at 6:57 PM, sacredhalla said:

This code works amazing, thank you @tuanphan. Just one question, is it possible to make it scale for mobile?

 

Thank you!

Can you share link to page where you added the code? I can check again easier.