Stepper input

Let’s start off with a simple “Stepper input” component. When hooked up to some JavaScript, clicking the plus and minus buttons will increment and decrement the input field’s value.

Normally you would build something like this by inlining the button and input elements withdisplay: inline-block(or maybe float: left if you’re old school).

But that will result in creating specific selectors for both of those elements. With flexbox, you won’t need those selectors: you can accomplish the same effect by adding display: flexto the container.

When you add this property to the container, you’re telling that element, “Hey buddy, you’re in charge here! Lay out your direct descendant children according to flexbox rules.” In their most basic form, these rules arrange the children along what’s called the “main axis”, by default the x–axis, from left to right.

CSS

.stepperInput {
  /**
   * Setting display to flex makes this container lay
   * out its children using flexbox. By default, it 
   * orders items horizontally, top-aligned.
   * This has a similar effect to setting the children
   * to have display: inline-block.
   */
  display: flex;
}

  .stepperInput__input {
    border-left: 0;
    border-right: 0;
    width: 60px;
    text-align: center;
  }

.button {
  cursor: pointer;
  padding: 5px 15px;
  color: #FFFFFF;
  background-color: #4EBBE4;
  font-size: 12px;
  border: 1px solid #16A2D7;
  border-radius: 4px;
}

.button--addOnLeft {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.button--addOnRight {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.input {
  border: 1px solid #D7DBDD;
  padding: 0 10px;
  border-radius: 0;
  box-shadow: none;
}

HTML

<div class="stepperInput">
  <button class="button button--addOnLeft">-</button>
  <input type="text" placeholder="Age" value="32" class="input stepperInput__input"/>
  <button class="button button--addOnRight">+</button>
</div>

JavaScript

/* eslint-disable */

var $stepperInput = $('.stepperInput input');

function incrementStepperInput(amount) {
  $stepperInput.val((parseInt($stepperInput.val()) || 0) + amount);
}

var stepperInputDecrement = $('.stepperInput button')[0];
$(stepperInputDecrement).click(() => {
  incrementStepperInput(-1);
});

var stepperInputIncrement = $('.stepperInput button')[1];
$(stepperInputIncrement).click(() => {
  incrementStepperInput(1);
});

More stuff

If you like my writing you can find more at my blog, cenizal.com. Right now I'm mostly writing about people management, software engineering, and interaction design.