I am trying to get multiple before/after sliders working on one page, but one slider controls both images

Question

I have followed this tutorial to create a before/ after slider on a page:

https://www.youtube.com/watch?v=dzqDU9efnnk&list=PL8b6zwbns8_ogX-G6klrF0CEPXNuRecqB&index=46&t=798s&ab_channel=CodinginPublic

I was able to get one working but i am unable to make it work with a second. Here is my code:

https://codepen.io/acodeaday/pen/qBYrdbJ

HTML

CSS


/* Image 001 */
    .image-container img {
        display: block;
        max-width: 100%;
      }
      
      main {
        display: grid;
        place-items: center;
        min-height: 100vh;
      }
      
      .containerBA {
        display: grid;
        place-content: center;
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        --position: 50%;
      }
      
      .image-container {
        max-width: 800px;
        max-height: 90vh;
        /* aspect-ratio: 1/1; */
      }
      
      .slider-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left;
      }
      
      .image-before {
        position: absolute;
        inset: 0;
        width: var(--position);
        /* filter: grayscale(100%) */
      }
      
      .slider {
        position: absolute;
        inset: 0;
        cursor: pointer;
        opacity: 0;
        /* for Firefox */
        width: 100%;
        height: 100%;
      }
      
      .slider:focus-visible ~ .slider-button {
        outline: 5px solid black;
        outline-offset: 3px;
      }
      
      .slider-line {
        position: absolute;
        inset: 0;
        width: .2rem;
        height: 100%;
        background-color: #fff;
        /* z-index: 10; */
        left: var(--position);
        transform: translateX(-50%);
        pointer-events: none;
      }
      
      .slider-button {
        position: absolute;
        background-color: #fff;
        color: black;
        padding: .5rem;
        border-radius: 100vw;
        display: grid;
        place-items: center;
        top: 50%;
        left: var(--position);
        transform: translate(-50%, -50%);
        pointer-events: none;
        /* z-index: 100; */
        box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
      }



      /* Image 002 */

      .containerBA2 {
        display: grid;
        place-content: center;
        position: relative;
        overflow: hidden;
        border-radius: 1rem;
        --position: 50%;
      }
      
      .image-container2 {
        max-width: 800px;
        max-height: 90vh;
        /* aspect-ratio: 1/1; */
      }
      
      .slider-image2 {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left;
      }
      
      .image-before2 {
        position: absolute;
        inset: 0;
        width: var(--position);
        /* filter: grayscale(100%) */
      }
      
      .slider2 {
        position: absolute;
        inset: 0;
        cursor: pointer;
        opacity: 0;
        /* for Firefox */
        width: 100%;
        height: 100%;
      }
      
      .slider2:focus-visible ~ .slider-button2 {
        outline: 5px solid black;
        outline-offset: 3px;
      }
      
      .slider-line2 {
        position: absolute;
        inset: 0;
        width: .2rem;
        height: 100%;
        background-color: #fff;
        /* z-index: 10; */
        left: var(--position);
        transform: translateX(-50%);
        pointer-events: none;
      }
      
      .slider-button2 {
        position: absolute;
        background-color: #fff;
        color: black;
        padding: .5rem;
        border-radius: 100vw;
        display: grid;
        place-items: center;
        top: 50%;
        left: var(--position);
        transform: translate(-50%, -50%);
        pointer-events: none;
        /* z-index: 100; */
        box-shadow: 1px 1px 1px hsl(0, 50%, 2%, .5);
      }

JS


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

// My js edit 002
const container2 = document.querySelector('.containerBA2');
document.querySelector('.slider2').addEventListener('input', (e) => {
  container.style.setProperty('--position', `${e.target.value}%`);
})

if you look at the sliders underneath the code, the top slider works but the bottom slider controls the top slider.

I've tried to go through and change every reference and class, so i really can't figure out where the overlap is coming from.

I thought it could possibly be coming from --position, but i tried to change it to --position2 but that broke it, im not really sure how to separate that if that is the problem.

Thank you for any help.

I am trying to get multiple before/after sliders working on one page, but one slider controls both images

0 Answers