Input Number Incrementer

By Rafi

How do I use This?

A common use case for a "quantity" input on an eCommerce site. These number inputs could be a little friendlier and easier to use than a form.

HTML

<h6 class="text-center">Unit(s)</h6>
<div class="input-group input-number-group">
  <div class="input-group-button">
    <span class="input-number-decrement">-</span>
  </div>
  <input class="input-number" type="number" value="1" min="0" max="1000">
  <div class="input-group-button">
    <span class="input-number-increment">+</span>
  </div>
</div>

$input-number-size: 80px;

.input-number-group {
  display: flex;
  justify-content: center;

  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    appearance: none;
  }

  .input-group-button {
    line-height: calc(#{$input-number-size}/2 - 5px);
  }

  .input-number {
    width: $input-number-size;
    padding: 0 12px;
    vertical-align: top;
    text-align: center;
    outline: none;
    display: block;
    margin: 0;
  }

  .input-number,
  .input-number-decrement,
  .input-number-increment {
    border: 1px solid $medium-gray;
    height: $input-number-size/2;
    user-select: none;
    border-radius: $global-radius;
  }

  .input-number-decrement,
  .input-number-increment {
    display: inline-block;
    width: $input-number-size/2;
    background: $light-gray;
    color: $body-font-color;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
    font-size: 2rem;
    font-weight: 400;
  }

  .input-number-decrement {
    margin-right: 0.3rem;
  }

  .input-number-increment {
    margin-left: 0.3rem;
  }
}

.input-number-group {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.input-number-group input[type=number]::-webkit-inner-spin-button,
.input-number-group input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}

.input-number-group .input-group-button {
  line-height: calc(80px/2 - 5px);
}

.input-number-group .input-number {
  width: 80px;
  padding: 0 12px;
  vertical-align: top;
  text-align: center;
  outline: none;
  display: block;
  margin: 0;
}

.input-number-group .input-number,
.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
  border: 1px solid #cacaca;
  height: 40px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  border-radius: 0;
}

.input-number-group .input-number-decrement,
.input-number-group .input-number-increment {
  display: inline-block;
  width: 40px;
  background: #e6e6e6;
  color: #0a0a0a;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 400;
}

.input-number-group .input-number-decrement {
  margin-right: 0.3rem;
}

.input-number-group .input-number-increment {
  margin-left: 0.3rem;
}

$('.input-number-increment').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
});

$('.input-number-decrement').click(function() {
  var $input = $(this).parents('.input-number-group').find('.input-number');
  var val = parseInt($input.val(), 10);
  $input.val(val - 1);
})

Input Number Incrementer

By Rafi

Search and Filter Hero Section

Floating Label Forms

Sticky Signup Bar

Input Number Incrementer

By Rafi

Similar Building Blocks

Search and Filter Hero Section

Floating Label Forms

Sticky Signup Bar