arrow_back
View code

<div class="flex justify-center margin-top-xxxlg">
  <div class="quantity-input width-xxxxlg">
    <button class="cdt-btn padding-md bg color-highest decrease">
      <svg class="icon" viewBox="0 0 12 12">
        <path d="M11,7H1A1,1,0,0,1,1,5H11a1,1,0,0,1,0,2Z"></path>
      </svg>
    </button>
    <input type="number" min="1" value="1" class="text-center" />
    <button class="cdt-btn padding-md bg color-highest increase">
      <svg class="icon" viewBox="0 0 12 12">
        <path d="M11,5H7V1A1,1,0,0,0,5,1V5H1A1,1,0,0,0,1,7H5v4a1,1,0,0,0,2,0V7h4a1,1,0,0,0,0-2Z"></path>
      </svg>
    </button>
  </div>
</div>
</div>
                        
Copy HTML

/*
 * File: _quantity-input.scss
 * Location /src/scss/components
 * Quantity input component
 */

:root {
  --quantity-input-text-size: var(--text-md);
}
.quantity-input {
  display: flex;
  input {
    border-radius: 0;
    font-size: var(--quantity-input-text-size);
    color: var(--color-mid);
    margin: 0;
    display: inline-block;
    -moz-appearance: textfield;
    display: block;
    &::-webkit-inner-spin-button,
    &::-webkit-outer-spin-button {
      display: none;
    }
  }
  button {
    border: 2px solid var(--color-lower);
    color: var(--color-mid);
    .icon {
      fill: currentColor;
    }
    &:hover {
      background-color: var(--color-lowest);
    }
    &:first-child {
      border-right: 0;
    }
    &:last-child {
      border-left: 0;
    }
  }
}

                        
Copy SCSS

/*
 * File: quantity-input.js
 * Location /src/js/components
 * Quantity input component
*/

document.querySelectorAll('.quantity-input').forEach(qInput => {
    const decrease = qInput.querySelector('.decrease');
    const increase = qInput.querySelector('.increase');
    const input = qInput.querySelector('input');
    const min = input.getAttribute('min') ? parseInt(input.getAttribute('min')) : 0;
    const max = input.getAttribute('max') ? parseInt(input.getAttribute('max')) : Number.MAX_VALUE;
    const step = input.getAttribute('step') != undefined ? parseInt(input.getAttribute('step')) : 1;
    decrease.addEventListener('click', e => {
        input.value = parseInt(input.value) - step < min ? min : parseInt(input.value) - step;
    });
    increase.addEventListener('click', e => {
        input.value = parseInt(input.value) + step;
    });
});
Copy JS
Upgrade to professional version

Using professional version, you will have unlimited number of projects and unlimited access to materials in Kodhus.com.