Как сделать слайдер для каждого отдельного элемента html на странице?

Question

Мне нужно сделать карточки с ползунками на моей странице, и мне нужно сделать это с использованием чистого JavaScript, не могу использовать какие-либо рамки. Каждый раз, когда пользователь нажимает на каждую карту, на этой указанной c карте должно происходить скольжение. Проблема в том, что я не могу просто получить доступ ко всем элементам управления ползунком, мне нужно сделать это динамически, с получением идентификатора карты (которая была нажата) или чего-то еще. Как я могу это сделать? Одним из решений было бы следить за элементом события, используя .parrentNode вплоть до идентификатора карты, но что если какой-то элемент, нажатый на карту, имеет такой же уровень отступа, что и элементы управления ползунка? Это привело бы к нежелательному поведению. Что еще я могу сделать?

Вот раздел с карточками продуктов:

<section class="products">
  <div class="products__card slided" id="0">
    <div class="products__card--product-area">
      <div class="galery">
          <img src="./img/converse-blue-front.jpg" alt="converse front" class="galery__image-1">
          <img src="./img/converse-blue-side.jpg" alt="converse side" class="galery__image-2">
          <img src="./img/converse-blue-back.jpg" alt="converse back" class="galery__image-3">
      </div>
      <div class="image-area">
            <div class="slider__arrows">
                <div class="slider__arrows--arrow right"></div>
                <div class="slider__arrows--arrow left"></div>
            </div>
            <img src="img/converse-blue-front.jpg" alt="Very cool men's converse">
            <div class="slider-dots">
                <div class="dot dot1"></div>
                <div class="dot dot2"></div>
                <div class="dot dot3"></div>
            </div>
      </div>
    </div>
    <div class="products__card--name-area">
      <div class="products__card--name-area--prodName" id="name"><p>Very cool men's converse</p></div>
        <div class="products__card--name-area--price">
            <span id="price">485</span>
            <p>p.</p>
        </div>
    </div>
    <div class="products__card--slided-button-area">
      <a
        type="button"
        class="buying__button"
        id="startAddingButton=1"
        href="#buyingSetup-1"
      ><p>Начать оформление</p></a>
      <div class="buying__setup" id="buyingSetup-1">
        <div class="buying__setup--trash" id="deleteItem"><i class="fas fa-trash"></i></div>
        <div class="buying__setup--spinner" id="spin"><i class="fas fa-sync-alt"></i></div>
        <div class="buying__setup--quantity">
          <span id="quantityOfProduct">1</span>
          <p>шт.</p>
        </div>
        <div class="buying__setup--plus" id="addProduct"><i class="fas fa-plus"></i></div>
        <div class="buying__setup--complete-button"><p>Оформить</p></div>
      </div>
    </div>
  </div>
  <div class="products__card discounted">
    <div class="products__card--product-area">
        <div class="image">
            <div class="slider__arrows">
                <div class="slider__arrows--arrow right"></div>
                <div class="slider__arrows--arrow left"></div>
            </div>
            <img src="./img/vans-black-front.jpg" alt="Vans for women">
        </div>
        <div class="slider-dots">
            <div class="dot dot1"></div>
            <div class="dot dot2"></div>
            <div class="dot dot3"></div>
        </div>
      </div>
      <div class="products__card--name-area">
        <span class="name" id="name">Vans for women very comfy and beautiful</span>
        <div class="price">
            <p class="price__discounted">2150p.</p>
            <div class="price__undiscounted">
                <span id="price">485</span>
                <p>p.</p>
            </div>
        </div>
      </div>
      <div class="products__card--slided-button-area">
        <a
          type="button"
          class="buying__button"
          id="startAddingButton=2"
          href="#startAdding-2"
        >
        <p>Начать оформление</p>
      </a>
        <div class="buying__setup" id="startAdding-2">
          <div class="buying__setup--trash" id="deleteItem"><i class="fas fa-trash"></i></div>
          <div class="buying__setup--spinner"><i class="fas fa-sync-alt"></i></div>
          <div class="buying__setup--quantity">
            <span id="quantityOfProduct">1</span>
            <p>шт.</p>
          </div>
          <div class="buying__setup--plus" id="addProduct"><i class="fas fa-plus"></i></div>
          <div class="buying__setup--complete-button"><p>Оформить</p></div>
        </div>
      </div>
  </div>
</section>

Вот решение, которое я попробовал:

const controller = (() => {
document.addEventListener('click', ctrlDeleteItem);

function ctrlDeleteItem(event) {
    console.log(event.target.parentNode.parentNode.parentNode.parentNode.id);
}})();