Stepper - 图1

Stepper

Stepper Layout

Single stepper layout is pretty simple:

  1. <!-- Stepper element -->
  2. <div class="stepper">
  3.   <!-- Stepper minus/decrement button -->
  4.   <div class="stepper-button-minus"></div>
  5.   <!-- Stepper input -->
  6.   <div class="stepper-input-wrap">
  7.     <!-- recommended to make input not editable (readonly) -->
  8.     <input type="text" readonly value="10">
  9.   </div>
  10.   <!-- Stepper plus/increment button -->
  11.   <div class="stepper-button-plus"></div>
  12. </div>

If you don’t need an input element but still need to keep the value:

  1. <!-- Stepper element -->
  2. <div class="stepper">
  3.   <div class="stepper-button-minus"></div>
  4.   <!-- Stepper value element -->
  5.   <div class="stepper-value">10</div>
  6.   <div class="stepper-button-plus"></div>
  7. </div>

And if you don’t need to display value between stepper buttons:

  1. <!-- Stepper element -->
  2. <div class="stepper">
  3.   <div class="stepper-button-minus"></div>
  4.   <div class="stepper-button-plus"></div>
  5. </div>

Stepper Modifier Classes

Similar to Button it is possible to change Stepper styles (shape, size and color) by using additional modifier classes:

stepper-fillFilled-style stepper buttons
stepper-fill-iosStepper buttons will have filled-style only in iOS theme
stepper-fill-mdStepper buttons will have filled-style only in MD theme
stepper-fill-auroraStepper buttons will have filled-style only in Aurora theme
stepper-roundRounded stepper buttons
stepper-round-iosStepper buttons will be rounded only in iOS theme
stepper-round-mdStepper buttons will be rounded only in MD theme
stepper-round-auroraStepper buttons will be rounded only in Aurora theme
stepper-smallSmall stepper
stepper-small-iosStepper will be small only in iOS theme
stepper-small-mdStepper will be small only in MD theme
stepper-small-auroraStepper will be small only in Aurora theme
stepper-largeLarge stepper
stepper-large-iosStepper will be large only in iOS theme
stepper-large-mdStepper will be large only in MD theme
stepper-large-auroraStepper will be large only in Aurora theme
stepper-raisedRaised stepper
stepper-raised-iosRaised stepper only in iOS theme
stepper-raised-mdRaised stepper only in MD theme
stepper-raised-auroraRaised stepper only in Aurora theme
color-[color]Color button, where [color] is one of the default colors

Stepper App Methods

Let’s look at related App methods to work with Stepper:

app.stepper.create(parameters)- create Stepper instance

  • parameters - object. Object with stepper parameters

Method returns created Stepper’s instance

app.stepper.destroy(el)- destroy Stepper instance

  • el - HTMLElement or string (with CSS Selector) or object. Stepper element or Stepper instance to destroy.

app.stepper.get(el)- get Stepper instance by HTML element

  • el - HTMLElement or string (with CSS Selector). Stepper element.

Method returns Stepper’s instance

app.stepper.getValue(el)- get Stepper value

  • el - HTMLElement or string (with CSS Selector). Stepper element.

Method returns stepper value

app.stepper.setValue(el, value)- set new Stepper value

  • el - HTMLElement or string (with CSS Selector). Stepper element.
  • value - number

Method returns Stepper’s instance

Stepper Parameters

Now let’s look at list of available parameters we need to create Stepper:

ParameterTypeDefaultDescription
elHTMLElement
string		Stepper element. HTMLElement or string with CSS selector of stepper element
inputElHTMLElement
string		Stepper input element or CSS selector of input element. If not specified, will try to look for <input> inside of stepper element
stepnumber1Minimal step between values
minnumber0Minimum value
maxnumber100Maximum value
valuenumber0Initial value
wrapsbooleanfalseWhen enabled, incrementing beyond maximum value sets value to minimum value; likewise, decrementing below minimum value sets value to maximum value
autorepeatbooleanfalseWhen enabled it will repeatedly increase/decrease values while you tap and hold plus/minus buttons
autorepeatDynamicbooleanfalseWhen enabled it will increase autorepeat ratio based on how long you hold the button
valueElHTMLElement
string		Stepper value element or CSS selector of this element where Stepper will insert value. If not specified, and there is no inputEl passed will try to look for <div class=”stepper-value”> inside of stepper element
formatValuefunction (value)Function to format value in required format. It accepts current value and must return new formatted value;
manualInputModebooleanfalseEnables manual input mode. This mode allows to type value from keyboar and check fractional part with defined accurancy. Also, step parameter is ignored when typing in this mode.
decimalPointnumber4Number of digits after dot, when in manual input mode.
buttonsEndInputModebooleantrueDisables manual input mode on Stepper’s minus or plus button click.
onobject

Object with events handlers. For example:

  1. var stepper = app.stepper.create({
  2.   el: ‘.stepper’,
  3.   on: {
  4.     change: function () {
  5.       console.log(‘Stepper value changed’)
  6.     }
  7.   }
  8. })

Stepper Methods & Properties

So to create Stepper we have to call:

  1. var stepper = app.stepper.create({ /* parameters */ })

After that we have its initialized instance (like stepper variable in example above) with useful methods and properties:

Properties
stepper.appLink to global app instance
stepper.elStepper HTML element
stepper.$elDom7 instance with stepper HTML element
stepper.minStepper min value
stepper.maxStepper max value
stepper.valueStepper value
stepper.inputElStepper input HTML element
stepper.$inputElDom7 instance with stepper input HTML element
stepper.valueElStepper value container HTML element
stepper.$valueElDom7 instance with stepper value container HTML element
stepper.paramsStepper parameters
Methods
stepper.getValue()Returns stepper value
stepper.setValue(value)Set new stepper value
stepper.increment()Increment stepper value, similar to clicking on its “plus” button
stepper.decrement()Decrement stepper value, similar to clicking on its “minus” button
stepper.plus()Alias for stepper.increment()
stepper.minus()Alias for stepper.decrement()
stepper.destroy()Destroys stepper instance
stepper.on(event, handler)Add event handler
stepper.once(event, handler)Add event handler that will be removed after it was fired
stepper.off(event, handler)Remove event handler
stepper.off(event)Remove all handlers for specified event
stepper.emit(event, …args)Fire event on instance

Stepper Events

Stepper will fire the following DOM events on stepper element and events on app and stepper instance:

DOM Events

EventTargetDescription
stepper:changeStepper Element<div class=”stepper”>Event will be triggered when Stepper value has been changed
stepper:beforedestroyStepper Element<div class=”stepper”>Event will be triggered right before Stepper instance will be destroyed

App and Stepper Instance Events

Stepper instance emits events on both self instance and app instance. App instance events has same names prefixed with stepper.

EventArgumentsTargetDescription
change(stepper, value)stepperEvent will be triggered when stepper value has been changed. As an argument event handler receives stepper instance and stepper value
stepperChange(stepper, value)app
beforeDestroy(stepper)stepperEvent will be triggered right before Stepper instance will be destroyed. As an argument event handler receives stepper instance
stepperBeforeDestroy(stepper)app

Stepper Auto Initialization

If you don’t need to use Stepper API and your Stepper is inside of the page and presented in DOM on moment of page initialization then it can be auto initialized with just adding additional stepper-init class:

  1. <!-- Add stepper-init class -->
  2. <div class="stepper stepper-init">
  3.   <div class="stepper-button-minus"></div>
  4.   <div class="stepper-input-wrap">
  5.     <input type="text" readonly>
  6.   </div>
  7.   <div class="stepper-button-plus"></div>
  8. </div>

In this case if you need to access created Stepper instance you can use the app.stepper.get app method:

  1. var stepper = app.stepper.get('.stepper');
  3. if (stepper.value > 50) {
  4.   // do something
  5. }

When using auto init you may need to pass additional parameters. It can be done with two ways:

  • If you use stepper with input then step, min, max, value parameters can be set from same input attributes:

    1. <!-- min, max, step, value parameters will be set for same input attributes -->
    2. <div class="stepper stepper-init">
    3.   <div class="stepper-button-minus"></div>
    4.   <div class="stepper-input-wrap">
    5.     <input type="text" readonly min="0" max="50" step="10" value="15">
    6.   </div>
    7.   <div class="stepper-button-plus"></div>
    8. </div>

  • Otherwise, if you don’t have input inside, you can set all available parameters via data- attributes on stepper element.

    1. <!-- parameters set via data- attributes -->
    2. <div
    3.   class="stepper stepper-init"
    4.   data-min="0"
    5.   data-max="500"
    6.   data-step="25"
    7.   data-value="75"
    8. >
    9.   <div class="stepper-button-minus"></div>
    10.   <div class="stepper-value"></div>
    11.   <div class="stepper-button-plus"></div>
    12. </div>

CSS Variables

Below is the list of related CSS variables (CSS custom properties).

Note that commented variables are not specified by default and their values is what they fallback to in this case.

  1. :root {
  2.   /*
  3.   --f7-stepper-button-text-color: var(--f7-theme-color);
  4.   --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  5.   --f7-stepper-value-text-color: var(--f7-theme-color);
  6.   */
  7.   --f7-stepper-fill-button-text-color: #fff;
  8.   /*
  9.   --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
  10.   */
  11.   --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0,0,0,0.24);
  12.   --f7-stepper-value-font-weight: 500;
  13.   --f7-stepper-border-width: 2px;
  14. }
  15. .ios {
  16.   --f7-stepper-height: 28px;
  17.   --f7-stepper-border-radius: 5px;
  18.   /*
  19.   --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  20.   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
  21.   */
  22.   --f7-stepper-large-height: 44px;
  23.   --f7-stepper-small-height: 26px;
  24.   --f7-stepper-small-border-width: 2px;
  25.   --f7-stepper-value-font-size: 17px;
  26. }
  27. .md {
  28.   --f7-stepper-height: 36px;
  29.   --f7-stepper-border-radius: 4px;
  30.   /*
  31.   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  32.   */
  33.   --f7-stepper-large-height: 48px;
  34.   --f7-stepper-small-border-width: 2px;
  35.   --f7-stepper-small-height: 28px;
  36.   --f7-stepper-value-font-size: 14px;
  37.   --f7-stepper-button-pressed-bg-color: rgba(0, 0, 0, 0.1);
  38. }
  39. .md .theme-dark,
  40. .md.theme-dark {
  41.   --f7-stepper-button-pressed-bg-color: rgba(255, 255, 255, 0.1);
  42. }
  43. .aurora {
  44.   /*
  45.   --f7-stepper-button-hover-bg-color: rgba(var(--f7-theme-color-rgb), .07);
  46.   --f7-stepper-button-fill-hover-bg-color: var(--f7-theme-color-tint);
  47.   */
  48.   --f7-stepper-height: 28px;
  49.   --f7-stepper-border-radius: 4px;
  50.   /*
  51.   --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  52.   --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-shade);
  53.   */
  54.   --f7-stepper-large-height: 34px;
  55.   --f7-stepper-small-border-width: 1px;
  56.   --f7-stepper-small-height: 22px;
  57.   --f7-stepper-value-font-size: 14px;
  58. }

Examples

Shape and size

  1. <div class="block block-strong text-align-center">
  2.   <div class="row">
  3.     <div class="col">
  4.       <small>Default</small>
  5.       <div class="stepper stepper-init">
  6.         <div class="stepper-button-minus"></div>
  7.         <div class="stepper-input-wrap">
  8.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  9.         </div>
  10.         <div class="stepper-button-plus"></div>
  11.       </div>
  12.     </div>
  13.     <div class="col">
  14.       <small>Round</small>
  15.       <div class="stepper stepper-round stepper-init">
  16.         <div class="stepper-button-minus"></div>
  17.         <div class="stepper-input-wrap">
  18.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  19.         </div>
  20.         <div class="stepper-button-plus"></div>
  21.       </div>
  22.     </div>
  23.   </div>
  25.   <div class="row margin-top">
  26.     <div class="col">
  27.       <small>Fill</small>
  28.       <div class="stepper stepper-fill stepper-init">
  29.         <div class="stepper-button-minus"></div>
  30.         <div class="stepper-input-wrap">
  31.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  32.         </div>
  33.         <div class="stepper-button-plus"></div>
  34.       </div>
  35.     </div>
  36.     <div class="col">
  37.       <small>Round Fill</small>
  38.       <div class="stepper stepper-fill stepper-round stepper-init">
  39.         <div class="stepper-button-minus"></div>
  40.         <div class="stepper-input-wrap">
  41.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  42.         </div>
  43.         <div class="stepper-button-plus"></div>
  44.       </div>
  45.     </div>
  46.   </div>
  48.   <div class="row margin-top">
  49.     <div class="col">
  50.       <small>Small</small>
  51.       <div class="stepper stepper-small stepper-init">
  52.         <div class="stepper-button-minus"></div>
  53.         <div class="stepper-input-wrap">
  54.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  55.         </div>
  56.         <div class="stepper-button-plus"></div>
  57.       </div>
  58.     </div>
  59.     <div class="col">
  60.       <small>Small Round</small>
  61.       <div class="stepper stepper-small stepper-round stepper-init">
  62.         <div class="stepper-button-minus"></div>
  63.         <div class="stepper-input-wrap">
  64.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  65.         </div>
  66.         <div class="stepper-button-plus"></div>
  67.       </div>
  68.     </div>
  69.   </div>
  71.   <div class="row margin-top">
  72.     <div class="col">
  73.       <small>Small Fill</small>
  74.       <div class="stepper stepper-small stepper-fill stepper-init">
  75.         <div class="stepper-button-minus"></div>
  76.         <div class="stepper-input-wrap">
  77.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  78.         </div>
  79.         <div class="stepper-button-plus"></div>
  80.       </div>
  81.     </div>
  82.     <div class="col">
  83.       <small>Small Round Fill</small>
  84.       <div class="stepper stepper-small stepper-round stepper-fill stepper-init">
  85.         <div class="stepper-button-minus"></div>
  86.         <div class="stepper-input-wrap">
  87.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  88.         </div>
  89.         <div class="stepper-button-plus"></div>
  90.       </div>
  91.     </div>
  92.   </div>
  94.   <div class="row margin-top">
  95.     <div class="col">
  96.       <small>Large</small>
  97.       <div class="stepper stepper-large stepper-init">
  98.         <div class="stepper-button-minus"></div>
  99.         <div class="stepper-input-wrap">
  100.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  101.         </div>
  102.         <div class="stepper-button-plus"></div>
  103.       </div>
  104.     </div>
  105.     <div class="col">
  106.       <small>Large Round</small>
  107.       <div class="stepper stepper-large stepper-round stepper-init">
  108.         <div class="stepper-button-minus"></div>
  109.         <div class="stepper-input-wrap">
  110.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  111.         </div>
  112.         <div class="stepper-button-plus"></div>
  113.       </div>
  114.     </div>
  115.   </div>
  117.   <div class="row margin-top">
  118.     <div class="col">
  119.       <small>Large Fill</small>
  120.       <div class="stepper stepper-large stepper-fill stepper-init">
  121.         <div class="stepper-button-minus"></div>
  122.         <div class="stepper-input-wrap">
  123.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  124.         </div>
  125.         <div class="stepper-button-plus"></div>
  126.       </div>
  127.     </div>
  128.     <div class="col">
  129.       <small>Large Round Fill</small>
  130.       <div class="stepper stepper-large stepper-round stepper-fill stepper-init">
  131.         <div class="stepper-button-minus"></div>
  132.         <div class="stepper-input-wrap">
  133.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  134.         </div>
  135.         <div class="stepper-button-plus"></div>
  136.       </div>
  137.     </div>
  138.   </div>
  139. </div>

Raised

  1. <div class="block block-strong text-align-center">
  2.   <div class="row">
  3.     <div class="col">
  4.       <small>Default</small>
  5.       <div class="stepper stepper-raised stepper-init">
  6.         <div class="stepper-button-minus"></div>
  7.         <div class="stepper-input-wrap">
  8.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  9.         </div>
  10.         <div class="stepper-button-plus"></div>
  11.       </div>
  12.     </div>
  13.     <div class="col">
  14.       <small>Round</small>
  15.       <div class="stepper stepper-raised stepper-round stepper-init">
  16.         <div class="stepper-button-minus"></div>
  17.         <div class="stepper-input-wrap">
  18.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  19.         </div>
  20.         <div class="stepper-button-plus"></div>
  21.       </div>
  22.     </div>
  23.   </div>
  25.   <div class="row margin-top">
  26.     <div class="col">
  27.       <small>Fill</small>
  28.       <div class="stepper stepper-raised stepper-fill stepper-init">
  29.         <div class="stepper-button-minus"></div>
  30.         <div class="stepper-input-wrap">
  31.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  32.         </div>
  33.         <div class="stepper-button-plus"></div>
  34.       </div>
  35.     </div>
  36.     <div class="col">
  37.       <small>Round Fill</small>
  38.       <div class="stepper stepper-raised stepper-fill stepper-round stepper-init">
  39.         <div class="stepper-button-minus"></div>
  40.         <div class="stepper-input-wrap">
  41.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  42.         </div>
  43.         <div class="stepper-button-plus"></div>
  44.       </div>
  45.     </div>
  46.   </div>
  48.   <div class="row margin-top">
  49.     <div class="col">
  50.       <small>Small</small>
  51.       <div class="stepper stepper-raised stepper-small stepper-init">
  52.         <div class="stepper-button-minus"></div>
  53.         <div class="stepper-input-wrap">
  54.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  55.         </div>
  56.         <div class="stepper-button-plus"></div>
  57.       </div>
  58.     </div>
  59.     <div class="col">
  60.       <small>Small Round</small>
  61.       <div class="stepper stepper-raised stepper-small stepper-round stepper-init">
  62.         <div class="stepper-button-minus"></div>
  63.         <div class="stepper-input-wrap">
  64.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  65.         </div>
  66.         <div class="stepper-button-plus"></div>
  67.       </div>
  68.     </div>
  69.   </div>
  71.   <div class="row margin-top">
  72.     <div class="col">
  73.       <small>Small Fill</small>
  74.       <div class="stepper stepper-raised stepper-small stepper-fill stepper-init">
  75.         <div class="stepper-button-minus"></div>
  76.         <div class="stepper-input-wrap">
  77.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  78.         </div>
  79.         <div class="stepper-button-plus"></div>
  80.       </div>
  81.     </div>
  82.     <div class="col">
  83.       <small>Small Round Fill</small>
  84.       <div class="stepper stepper-raised stepper-small stepper-round stepper-fill stepper-init">
  85.         <div class="stepper-button-minus"></div>
  86.         <div class="stepper-input-wrap">
  87.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  88.         </div>
  89.         <div class="stepper-button-plus"></div>
  90.       </div>
  91.     </div>
  92.   </div>
  94.   <div class="row margin-top">
  95.     <div class="col">
  96.       <small>Large</small>
  97.       <div class="stepper stepper-raised stepper-large stepper-init">
  98.         <div class="stepper-button-minus"></div>
  99.         <div class="stepper-input-wrap">
  100.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  101.         </div>
  102.         <div class="stepper-button-plus"></div>
  103.       </div>
  104.     </div>
  105.     <div class="col">
  106.       <small>Large Round</small>
  107.       <div class="stepper stepper-raised stepper-large stepper-round stepper-init">
  108.         <div class="stepper-button-minus"></div>
  109.         <div class="stepper-input-wrap">
  110.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  111.         </div>
  112.         <div class="stepper-button-plus"></div>
  113.       </div>
  114.     </div>
  115.   </div>
  117.   <div class="row margin-top">
  118.     <div class="col">
  119.       <small>Large Fill</small>
  120.       <div class="stepper stepper-raised stepper-large stepper-fill stepper-init">
  121.         <div class="stepper-button-minus"></div>
  122.         <div class="stepper-input-wrap">
  123.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  124.         </div>
  125.         <div class="stepper-button-plus"></div>
  126.       </div>
  127.     </div>
  128.     <div class="col">
  129.       <small>Large Round Fill</small>
  130.       <div class="stepper stepper-raised stepper-large stepper-round stepper-fill stepper-init">
  131.         <div class="stepper-button-minus"></div>
  132.         <div class="stepper-input-wrap">
  133.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  134.         </div>
  135.         <div class="stepper-button-plus"></div>
  136.       </div>
  137.     </div>
  138.   </div>
  139. </div>

Colors

  1. <div class="block block-strong text-align-center">
  2.   <div class="row">
  3.     <div class="col">
  4.       <div class="stepper stepper-init stepper-fill color-red">
  5.         <div class="stepper-button-minus"></div>
  6.         <div class="stepper-input-wrap">
  7.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  8.         </div>
  9.         <div class="stepper-button-plus"></div>
  10.       </div>
  11.     </div>
  12.     <div class="col">
  13.       <div class="stepper stepper-round stepper-fill stepper-init color-green">
  14.         <div class="stepper-button-minus"></div>
  15.         <div class="stepper-input-wrap">
  16.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  17.         </div>
  18.         <div class="stepper-button-plus"></div>
  19.       </div>
  20.     </div>
  21.   </div>
  23.   <div class="row margin-top">
  24.     <div class="col">
  25.       <div class="stepper stepper-fill stepper-init color-blue">
  26.         <div class="stepper-button-minus"></div>
  27.         <div class="stepper-input-wrap">
  28.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  29.         </div>
  30.         <div class="stepper-button-plus"></div>
  31.       </div>
  32.     </div>
  33.     <div class="col">
  34.       <div class="stepper stepper-fill stepper-round stepper-init color-pink">
  35.         <div class="stepper-button-minus"></div>
  36.         <div class="stepper-input-wrap">
  37.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  38.         </div>
  39.         <div class="stepper-button-plus"></div>
  40.       </div>
  41.     </div>
  42.   </div>
  44.   <div class="row margin-top">
  45.     <div class="col">
  46.       <div class="stepper stepper-small stepper-fill stepper-init color-yellow">
  47.         <div class="stepper-button-minus"></div>
  48.         <div class="stepper-input-wrap">
  49.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  50.         </div>
  51.         <div class="stepper-button-plus"></div>
  52.       </div>
  53.     </div>
  54.     <div class="col">
  55.       <div class="stepper stepper-small stepper-fill stepper-round stepper-init color-orange">
  56.         <div class="stepper-button-minus"></div>
  57.         <div class="stepper-input-wrap">
  58.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  59.         </div>
  60.         <div class="stepper-button-plus"></div>
  61.       </div>
  62.     </div>
  63.   </div>
  65.   <div class="row margin-top">
  66.     <div class="col">
  67.       <div class="stepper stepper-small stepper-fill stepper-init color-gray">
  68.         <div class="stepper-button-minus"></div>
  69.         <div class="stepper-input-wrap">
  70.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  71.         </div>
  72.         <div class="stepper-button-plus"></div>
  73.       </div>
  74.     </div>
  75.     <div class="col">
  76.       <div class="stepper stepper-small stepper-round stepper-fill stepper-init color-black">
  77.         <div class="stepper-button-minus"></div>
  78.         <div class="stepper-input-wrap">
  79.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  80.         </div>
  81.         <div class="stepper-button-plus"></div>
  82.       </div>
  83.     </div>
  84.   </div>
  85. </div>

Without input element

  1. <div class="block block-strong text-align-center">
  2.   <div class="row">
  3.     <div class="col">
  4.       <div class="stepper stepper-init" data-value="0" data-min="0" data-max="100" data-step="1">
  5.         <div class="stepper-button-minus"></div>
  6.         <div class="stepper-value"></div>
  7.         <div class="stepper-button-plus"></div>
  8.       </div>
  9.     </div>
  10.     <div class="col">
  11.       <div class="stepper stepper-round stepper-init" data-value="0" data-min="0" data-max="100" data-step="1">
  12.         <div class="stepper-button-minus"></div>
  13.         <div class="stepper-value"></div>
  14.         <div class="stepper-button-plus"></div>
  15.       </div>
  16.     </div>
  17.   </div>
  18. </div>

Custom min, max and step

  1. <div class="block block-strong text-align-center">
  2.   <div class="row">
  3.     <div class="col">
  4.       <div class="stepper stepper-fill stepper-init">
  5.         <div class="stepper-button-minus"></div>
  6.         <div class="stepper-input-wrap">
  7.           <input type="text" value="100" min="0" max="1000" step="100" readonly>
  8.         </div>
  9.         <div class="stepper-button-plus"></div>
  10.       </div>
  11.     </div>
  12.     <div class="col">
  13.       <div class="stepper stepper-fill stepper-round stepper-init" data-value="5" data-min="0" data-max="10" data-step="0.5">
  14.         <div class="stepper-button-minus"></div>
  15.         <div class="stepper-value"></div>
  16.         <div class="stepper-button-plus"></div>
  17.       </div>
  18.     </div>
  19.   </div>
  20. </div>

Autorepeat (Tap & hold)

  1. <div class="block block-strong text-align-center">
  2.   <div class="row">
  3.     <div class="col">
  4.       <small>Default</small>
  5.       <div class="stepper stepper-fill stepper-init" data-autorepeat="true">
  6.         <div class="stepper-button-minus"></div>
  7.         <div class="stepper-input-wrap">
  8.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  9.         </div>
  10.         <div class="stepper-button-plus"></div>
  11.       </div>
  12.     </div>
  13.     <div class="col">
  14.       <small>Dynamic</small>
  15.       <div class="stepper stepper-fill stepper-init" data-autorepeat="true" data-autorepeat-dynamic="true">
  16.         <div class="stepper-button-minus"></div>
  17.         <div class="stepper-input-wrap">
  18.           <input type="text" value="0" min="0" max="100" step="1" readonly>
  19.         </div>
  20.         <div class="stepper-button-plus"></div>
  21.       </div>
  22.     </div>
  23.   </div>
  24. </div>

Wraps

In wraps mode incrementing beyond maximum value sets value to minimum value, likewise, decrementing below minimum value sets value to maximum value

  1. <div class="block block-strong text-align-center">
  2.   <div class="row">
  3.     <div class="col">
  4.       <div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true" data-autorepeat-dynamic="true">
  5.         <div class="stepper-button-minus"></div>
  6.         <div class="stepper-input-wrap">
  7.           <input type="text" value="0" min="0" max="10" step="1" readonly>
  8.         </div>
  9.         <div class="stepper-button-plus"></div>
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

Custom value element

  1. <div class="list">
  2.   <ul>
  3.     <li class="item-content">
  4.       <div class="item-inner">
  5.         <div class="item-title">Apples: <span id="apples-count"></span></div>
  6.         <div class="item-after">
  7.           <div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#apples-count">
  8.             <div class="stepper-button-minus"></div>
  9.             <div class="stepper-button-plus"></div>
  10.           </div>
  11.         </div>
  12.       </div>
  13.     </li>
  14.     <li class="item-content">
  15.       <div class="item-inner">
  16.         <div class="item-title">Oranges: <span id="oranges-count"></span></div>
  17.         <div class="item-after">
  18.           <div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#oranges-count">
  19.             <div class="stepper-button-minus"></div>
  20.             <div class="stepper-button-plus"></div>
  21.           </div>
  22.         </div>
  23.       </div>
  24.     </li>
  25.   </ul>
  26. </div>

Custom value format

  1. <div class="list">
  2.   <ul>
  3.     <li class="item-content">
  4.       <div class="item-inner">
  5.         <div class="item-title">
  6.           <div class="item-header">Meeting starts in</div>
  7.           <span id="meeting-start-time"></span>
  8.         </div>
  9.         <div class="item-after">
  10.           <div class="stepper stepper-fill stepper-small stepper-raised" id="stepper-time">
  11.             <div class="stepper-button-minus"></div>
  12.             <div class="stepper-button-plus"></div>
  13.           </div>
  14.         </div>
  15.       </div>
  16.     </li>
  17.   </ul>
  18. </div>

Manual input

It is possible to enter value manually from keyboard or mobile keypad. When click on input field, stepper enter into manual input mode, which allow type value from keyboar and check fractional part with defined accurancy. Click outside or enter Return key, ending manual mode.

  1. <div class="block block-strong text-align-center">
  2.   <div class="row">
  3.     <div class="col">
  4.       <div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true" data-autorepeat-dynamic="true" data-decimal-point="2" data-manual-input-mode="true">
  5.         <div class="stepper-button-minus"></div>
  6.         <div class="stepper-input-wrap">
  7.           <input type="text" value="0" min="0" max="1000" step="1">
  8.         </div>
  9.         <div class="stepper-button-plus"></div>
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

← Statusbar

Subnavbar →