American Express American Express |

Steppers

Purpose

Stepper controls use plus and minus buttons to let the customer to select an exact value incrementally from a limited range of values.

Requirements

The DLS stepper component requires both dls.css and dls.js due to the complexities involved with its logic, functionality, and animations.

Default Stepper

Usage

Use the default stepper when the customer doesn’t require granularity or customization in value selection. Use this stepper to limit the range from 0 to 10.

Example - Default Stepper

Copy
<label class="label-3" for="stepper-3">Value</label>
<div class="stepper stepper-default" data-toggle="stepper">
  <button class="btn btn-secondary btn-icon btn-inline stepper-btn">
    <i data-dls-glyph="minus" data-dls-glyph-size="lg" title="Decrease value"></i>
  </button>
  <div class="stepper-field stepper-default-field">
    <input id="stepper-3" type="number" class="stepper-value stepper-default-value" value="2" min="0" max="10" step="1"
           readonly="readonly"/>
    <span class="sr-only" aria-live="polite"></span>
  </div>
  <button class="btn btn-secondary btn-icon btn-inline stepper-btn">
    <i data-dls-glyph="plus" data-dls-glyph-size="lg" title="Increase value"></i>
  </button>
</div>

Input Stepper

Usage

Use the input stepper when the range of options is greater than ten steps. In addition to using the plus and minus buttons, the customer can also enter a number into the input field.

Example - Input Stepper

Copy
<label class="label-3" for="stepper-1">Value</label>
<div class="stepper stepper-input" data-toggle="stepper">
  <span class="sr-only" aria-live="polite"></span>
  <input id="stepper-1" type="number" class="form-control stepper-value stepper-input-value" value="1" min="-5" max="5" step="1"/>
  <div class="btn-group">
    <button id="stepper-input-dec" class="btn btn-secondary btn-icon btn-inline stepper-btn">
      <i data-dls-glyph="minus" data-dls-glyph-size="lg" title="Decrease value"></i>
    </button>
    <button id="stepper-input-inc" class="btn btn-secondary btn-icon btn-inline stepper-btn">
      <i data-dls-glyph="plus" data-dls-glyph-size="lg" title="Increase value"></i>
    </button>
  </div>
</div>

Example - Disabled

Copy
<label class="label-3" for="stepper-2">Value</label>
<div class="stepper stepper-input" data-toggle="stepper">
  <span class="sr-only" aria-live="polite"></span>
  <input  id="stepper-2" type="number" class="form-control stepper-value stepper-input-value" value="1" min="0" max="20" step="1" disabled/>
  <div class="btn-group">
    <button id="disabled-minus" class="btn btn-secondary btn-icon btn-inline stepper-btn" disabled="true">
      <i data-dls-glyph="minus" data-dls-glyph-size="lg" title="Decrease value"></i>
    </button>
    <button class="btn btn-secondary btn-icon btn-inline stepper-btn" disabled="true">
      <i data-dls-glyph="plus" data-dls-glyph-size="lg" title="Increase value"></i>
    </button>
  </div>
</div>

Slide Stepper

Usage

The slider stepper allows a customer to move the handle along a horizontal track to increase or decrease the value within a set range. Additionally, the customer can use the minus or plus icons to increase or decrease the value incrementally. Use tooltips as necessary to give additional instructions and information.

Example - Slide Stepper

Price

Copy
<h4 class="label-3" id="example-slide-stepper">Price</h4>

<div class="slider" data-toggle="slider" data-value="100.00"
     data-currency="de-DE" data-tooltip="true" data-interval="100">

  <button class="slider-button">
    <i class="slider-button-styles display-block" data-dls-glyph="minus" title="Decrease Price"></i>
  </button>

  <div class="slider-bar">
    <div class="slider-track">
      <div class="slider-selection"></div>
    </div>
    <div class="tooltip-container">
      <button class="slider-handler"
              data-attach-tooltip
              role="slider"
              aria-valuemin="0" aria-valuemax="1000"
              aria-valuenow="0" data-step="10"  aria-labelledby="example-slide-stepper">
        <span class="slider-handler-styles anim-in"></span>
      </button>
      <div class="tooltip tooltip-slider anim-in dls-gray-02-bg dls-gray-06" aria-hidden="true" data-trigger="none" data-placement="bottom" role="tooltip">
        <div class="tooltip-arrow">
          <div class="tooltip-arrow-pointer"></div>
        </div>
        <div class="tooltip-inner"></div>
      </div>
    </div>
  </div>

  <button class="slider-button">
    <i class="slider-button-styles display-block" data-dls-glyph="plus" title="Increase Price"></i>
  </button>

</div>

Functionality

If you are using dls.js, reference the attributes below for functionality.

Stepper

Attribute Name Options Description
data-toggle stepper Creates a stepper object; required for dls.js functionality.
min number Minimum value allowed in the stepper. Default is 0.
max number Maximum value allowed in the stepper. Default is 10.
step number Number to increase/decrease the values by. Default is 1.
value number Starting value shown on stepper. Default is 1.

Slide Stepper

Attribute Name Options Description
data-toggle slider Creates a stepper object; required for dls.js functionality.
data-value number Starting value shown on the slider. Default is 1.
data-currency locale/currency code Displays the value in the specified currency format.
data-interval number Number of milliseconds to set the speed of increasing/decreasing the slider value when clicking and holding. Default is 500.
aria-valuemin number Minimum value allowed on the slider.
aria-valuemax number Maximum value allowed on the slider.


Function Name Parameters Description
slider.setVal() number Manually change slider value.