Как сделать разное отслеживание ползунков у rangeSlider?

class Thumb {
      constructor(selector) {
        this.$thumb = selector;
        this.$rangeSlider = document.querySelector('.range-slider')
        this.$info = document.querySelector('.info')
        this.init()
      }

      init() {
        this.$rangeSlider.onmousedown = () => {
          this.onMouseMove = this.onMouseMove.bind(this);
          this.onMouseDown = this.onMouseDown.bind(this);
          document.addEventListener('mousemove', this.onMouseMove)
          document.addEventListener('mouseup', this.onMouseDown)
        }

      }
      onMouseDown() {
        document.removeEventListener('mousemove', this.onMouseMove)
        document.removeEventListener('mouseup', this.onMouseDown)
      }
      onMouseMove(e) {
        let t = Array.from(e.target.classList).includes('thumb')
        e.preventDefault();
        this.$thumb.ondragstart = () => false;
        const rect = this.$rangeSlider.getBoundingClientRect()
        const percent = Math.min(Math.max(0, e.x - rect.x), rect.width) / rect.width
        this.$info.innerHTML = percent * 100 + '%'
        if(t){
          this.$thumb = this.$rangeSlider.querySelector('.thumb')
        } else {
          this.$thumb = this.$rangeSlider.querySelector('.thumb1')
        }
        this.$thumb.style.left = percent * 100 + '%'
      }
    }
    const el = document.querySelectorAll('.thumb-js');
    el.forEach((selector) => new Thumb(selector))

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .container {
      padding: 20px;
    }

    .range-slider {
      height: 100%;
      margin-inline: .5rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      flex-direction: column;
    }

    .progress-bar {
      background-color: rgba(73, 73, 73, 0.5);
      border: 3px solid rgb(0, 0, 0);
      height: 20px;
      width: 100%;
      position: relative
    }

    .thumb {
      width: 20px;
      height: 20px;
      position: absolute;
      transform: translateX(-50%) translateY(-3px);
      top: 0;
      left: 10%;
      background-color: rgb(98, 0, 255);
      transition: transform 150ms ease-in-out;
    }

    .thumb1 {
      width: 20px;
      height: 20px;
      position: absolute;
      transform: translateX(-50%) translateY(-3px);
      top: 0;
      left: 90%;
      background-color: red;
      transition: transform 150ms ease-in-out;
    }

    .info{
      padding: 20px;
    }

    .sub-lines {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 10px;
      /* background-color: rgb(255, 190, 105); */
    }

    .sub-lines-item {
      width: 2px;
      height: 10px;
      background: red;
    }

  <div class="container">
    <div class="range-slider">
      <div class="progress-bar">
        <div class="thumb-js thumb"></div>
        <div class="thumb-js thumb1"></div>
      </div>
      <div class="sub-lines">
      </div>
    </div>
  </div>
  <span class="info"></span>