@use 'sprucecss/scss/spruce' as *;

.range-group {
  display: flex;
  flex-direction: column;
  gap: spacer('xs');

  .form-label {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');
    justify-content: space-between;

    &__value {
      font-weight: 400;
    }
  }

  &__inner {
    align-items: center;
    display: flex;
    gap: spacer('xs');

    .form-range {
      flex-grow: 1;
      margin-block-start: 0;
    }

    .form-range-control {
      flex-shrink: 0;
    }
  }
}

<div class="range-group">
    <label class="form-label" for="quantity">
        <span class="form-label__title">Quantity</span>
        <span class="form-label__value" data-suffix="piece">1 piece</span>
    </label>
    <div class="range-group__inner">
        <button class="btn btn--primary btn--sm btn--icon" data-action="decrement" aria-label="Decrement quantity">
            <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
        </button>
        <input class="form-range range-group__control" id="quantity" type="range" min="1" max="99" value="1" step="1"/>
        <button class="btn btn--primary btn--sm btn--icon" data-action="increment" aria-label="Increment quantity">
            <svg class="btn__icon" aria-hidden="true" fill="none" focusable="false" height="24" stroke-linecap="round" stroke-linejoin="round" stroke-width="3.5" stroke="currentColor" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                <line class="vertical-line" x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
            </svg>
        </button>
    </div>
</div>

(() => {
  const initializeRangeGroup = (rangeGroup) => {
    const decrement = rangeGroup.querySelector('[data-action="decrement"]');
    const increment = rangeGroup.querySelector('[data-action="increment"]');
    const label = rangeGroup.querySelector('.form-label__value');
    const suffix = label.getAttribute('data-suffix') || '';
    const control = rangeGroup.querySelector('.range-group__control');
    const step = parseInt(control.getAttribute('step'), 10) || 1;
    const min = parseInt(control.getAttribute('min'), 10) || 0;
    const max = parseInt(control.getAttribute('max'), 10) || 100;

    const checkDisabledState = (value) => {
      decrement.disabled = min === value;
      increment.disabled = max === value;
    };

    const updateValues = (value) => {
      control.value = value;
      label.textContent = `${value} ${suffix}`;
      checkDisabledState(value);
    };

    control.addEventListener('input', (e) => {
      updateValues(parseInt(e.target.value, 10));
    });

    decrement.addEventListener('click', () => {
      if (control.value > min) {
        updateValues(parseInt(control.value, 10) - step);
      }
    });

    increment.addEventListener('click', () => {
      if (control.value < max) {
        updateValues(parseInt(control.value, 10) + step);
      }
    });

    updateValues(parseInt(control.value, 10));
  };

  const rangeGroups = document.querySelectorAll('.range-group');

  if (rangeGroups.length) {
    rangeGroups.forEach(initializeRangeGroup);
  }
})();