Spin Box

A Spin Box is used to adjust or change value in the adjoining text box by either clicking on the up or down arrow.

You can use different data attributes on <input type="text" class="form-control">to set some default behaviour to the Spin Box

data-spin-min="-10" to set minimum allowed value. Default is 0

data-spin-max="10" to set maximum allowed value. Default is 100

data-spin-steps="2" to set increment/ decrement steps. Default is 1

data-spin-value="8" to set initial value.

data-spin-decimals="2" to set allowed decimal value. Default is 0

Example:

Form Horizontal

Number:

  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box">
        <label for="number1" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number1" class="form-control" data-spin-min="-10" data-spin-max="10" data-spin-steps="2">
        </div>
      </div>
    </div>
  </form>
  

Form Inline

Number:

  <form class="form-inline">
    <div class="form-row">
      <div class="form-group spin-box">
        <label for="number2" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number2" class="form-control">
        </div>
      </div>
    </div>
  </form>
  

Disabled

Number:

  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box disabled">
        <label for="number3" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number3" class="form-control" disabled="disabled">
        </div>
      </div>
    </div>
  </form>
  

Invalid

Number:

  <form class="form-horizontal">
    <div class="form-row">
      <div class="form-group spin-box invalid">
        <label for="number4" class="control-label">Number: </label>
        <div class="control-input">
          <input type="text" id="number4" class="form-control">
        </div>
      </div>
    </div>
  </form>