Как сделать, чтобы скрипт отрабатывал только в той карточке, с которой взаимодействуют?

Question

[rasimzes]

Есть множество карточек следующего вида, каждая содержит кастомизированный input range:

<div class="card">
  <div class="select">
    <div class="select__text">Left</div>
    <div class="slider"></div>
    <input class="input-range" type="range" value="50" min="0" max="100" step="50">
    <div class="select__text select__text--right">Right</div>
  </div>
</div>

CSS

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  display: flex;
}

.card {
  width: 294px;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin: 5px auto;
}

.select {
  height: 64px;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 40px 0;
  padding: 0 8px;
  z-index: 9;
  // background: linear-gradient(to right,
  //   #FFF0DF 0%, #FFF0DF 73px,
  //   #FFE4CC 73px, #FFE4CC 75px,
  //   #FFF0DF 75px, #FFF0DF 148px,
  //   #FFE4CC 148px, #FFE4CC 150px,
  //   #F3EEFF 150px, #F3EEFF 219px,
  //   #E7DFFC 219px, #E7DFFC 221px,
  //   #F3EEFF 221px, #F3EEFF 100%);
  background: linear-gradient(
    to right,
    #fff0df 0%,
    #fff0df 24.83%,
    #ffe4cc 24.83%,
    #ffe4cc 25.51%,
    #fff0df 25.51%,
    #fff0df 50.34%,
    #ffe4cc 50.34%,
    #ffe4cc 51.02%,
    #f3eeff 51.02%,
    #f3eeff 74.49%,
    #e7dffc 74.49%,
    #e7dffc 75.17%,
    #f3eeff 75.17%,
    #f3eeff 100%
  );

  &__text {
    width: 59px;
    font-size: 12px;
    line-height: 18px;
    color: #debb9c;

    &--right {
      width: 47px;
      text-align: right;
      color: #baacde;
    }
  }
}

.slider {
  position: absolute;
  z-index: 99;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 52px;
  height: 32px;
  background: #f7cd48;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5.6px;
}

.input-range {
  opacity: 0;
  width: 52%;
  position: absolute;
  z-index: 999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

Обновляю положение кастомного ползунка следующим образом:

$(".input-range").on("input", function () {
  switch ($(this).val()) {
    case "0":
      $(".slider").css("left", "25%");
      break;
    case "50":
      $(".slider").css("left", "50%");
      break;
    case "100":
      $(".slider").css("left", "75%");
      break;
  }
});

Вместо одной карточки, обновляется везде. Как исправить?

Answer 1

[0xD34F]

$('.input-range').on('input', function() {
  $(this)
    .closest('.select')
    .find('.slider')
    .css('left', (((this.value / 50) + 1) * 25) + '%');
});

Answer 2

[Алексей Ярков]

$(this).siblings(".slider").css("left", "25%");