Stepper

Stepper Layout

Single stepper layout is pretty simple:

<!-- Stepper element -->
<div class="stepper">
  <!-- Stepper minus/decrement button -->
  <div class="stepper-button-minus"></div>
  <!-- Stepper input -->
  <div class="stepper-input-wrap">
    <!-- recommended to make input not editable (readonly) -->
    <input type="text" readonly value="10" />
  </div>
  <!-- Stepper plus/increment button -->
  <div class="stepper-button-plus"></div>
</div>

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

<!-- Stepper element -->
<div class="stepper">
  <div class="stepper-button-minus"></div>
  <!-- Stepper value element -->
  <div class="stepper-value">10</div>
  <div class="stepper-button-plus"></div>
</div>

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

<!-- Stepper element -->
<div class="stepper">
  <div class="stepper-button-minus"></div>
  <div class="stepper-button-plus"></div>
</div>

Stepper Modifier Classes

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

stepper-fill	Filled-style stepper buttons
stepper-fill-ios	Stepper buttons will have filled-style only in iOS theme
stepper-fill-md	Stepper buttons will have filled-style only in MD theme
stepper-round	Rounded stepper buttons
stepper-round-ios	Stepper buttons will be rounded only in iOS theme
stepper-round-md	Stepper buttons will be rounded only in MD theme
stepper-small	Small stepper
stepper-small-ios	Stepper will be small only in iOS theme
stepper-small-md	Stepper will be small only in MD theme
stepper-large	Large stepper
stepper-large-ios	Stepper will be large only in iOS theme
stepper-large-md	Stepper will be large only in MD theme
stepper-raised	Raised stepper
stepper-raised-ios	Raised stepper only in iOS theme
stepper-raised-md	Raised stepper only in MD 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:

Parameter	Type	Default	Description
el	HTMLElement string		Stepper element. HTMLElement or string with CSS selector of stepper element
inputEl	HTMLElement string		Stepper input element or CSS selector of input element. If not specified, will try to look for `<input>` inside of stepper element
step	number	1	Minimal step between values
min	number	0	Minimum value
max	number	100	Maximum value
value	number	0	Initial value
wraps	boolean	false	When enabled, incrementing beyond maximum value sets value to minimum value; likewise, decrementing below minimum value sets value to maximum value
autorepeat	boolean	false	When enabled it will repeatedly increase/decrease values while you tap and hold plus/minus buttons
autorepeatDynamic	boolean	false	When enabled it will increase autorepeat ratio based on how long you hold the button
valueEl	HTMLElement 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
formatValue	function (value)		Function to format value in required format. It accepts current value and must return new formatted value;
manualInputMode	boolean	false	Enables manual input mode. This mode allows to type value from keyboard and check fractional part with defined accurancy. Also, `step` parameter is ignored when typing in this mode.
decimalPoint	number	4	Number of digits after dot, when in manual input mode.
buttonsEndInputMode	boolean	true	Disables manual input mode on Stepper's minus or plus button click.
on	object		Object with events handlers. For example: `var stepper = app.stepper.create({ el: '.stepper', on: { change: function () { console.log('Stepper value changed') } } })`

Stepper Methods & Properties

So to create Stepper we have to call:

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.app	Link to global app instance
stepper.el	Stepper HTML element
stepper.$el	Dom7 instance with stepper HTML element
stepper.min	Stepper min value
stepper.max	Stepper max value
stepper.value	Stepper value
stepper.inputEl	Stepper input HTML element
stepper.$inputEl	Dom7 instance with stepper input HTML element
stepper.valueEl	Stepper value container HTML element
stepper.$valueEl	Dom7 instance with stepper value container HTML element
stepper.params	Stepper 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

Event	Target	Description
stepper:change	Stepper Element<div class="stepper">	Event will be triggered when Stepper value has been changed
stepper:beforedestroy	Stepper 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.

Event	Arguments	Target	Description
change	(stepper, value)	stepper	Event 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)	stepper	Event 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:

<!-- Add stepper-init class -->
<div class="stepper stepper-init">
  <div class="stepper-button-minus"></div>
  <div class="stepper-input-wrap">
    <input type="text" readonly />
  </div>
  <div class="stepper-button-plus"></div>
</div>

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

var stepper = app.stepper.get('.stepper');

if (stepper.value > 50) {
  // do something
}

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:

<!-- min, max, step, value parameters will be set for same input attributes -->
<div class="stepper stepper-init">
  <div class="stepper-button-minus"></div>
  <div class="stepper-input-wrap">
    <input type="text" readonly min="0" max="50" step="10" value="15" />
  </div>
  <div class="stepper-button-plus"></div>
</div>

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

<!-- parameters set via data- attributes -->
<div
  class="stepper stepper-init"
  data-min="0"
  data-max="500"
  data-step="25"
  data-value="75"
>
  <div class="stepper-button-minus"></div>
  <div class="stepper-value"></div>
  <div class="stepper-button-plus"></div>
</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.

:root {
  /*
  --f7-stepper-button-text-color: var(--f7-theme-color);
  --f7-stepper-button-pressed-text-color: var(--f7-button-text-color, var(--f7-theme-color));
  --f7-stepper-value-text-color: var(--f7-theme-color);
  --f7-stepper-fill-button-bg-color: var(--f7-theme-color);
  */
  --f7-stepper-raised-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --f7-stepper-value-font-weight: 500;
}
.ios {
  --f7-stepper-height: 28px;
  --f7-stepper-border-radius: 5px;
  --f7-stepper-fill-button-text-color: #fff;
  /*
  --f7-stepper-button-pressed-bg-color: rgba(var(--f7-theme-color-rgb), .15);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color-tint);
  */
  --f7-stepper-large-height: 44px;
  --f7-stepper-small-height: 26px;
  --f7-stepper-value-font-size: 17px;
  --f7-stepper-border-width: 2px;
  --f7-stepper-border-color: var(--f7-theme-color);
  --f7-stepper-small-border-width: 2px;
}
.md {
  --f7-stepper-height: 40px;
  --f7-stepper-border-radius: 8px;
  --f7-stepper-large-height: 48px;
  --f7-stepper-small-height: 32px;
  --f7-stepper-value-font-size: 14px;
  --f7-stepper-border-width: 1px;
  --f7-stepper-small-border-width: 1px;
  --f7-stepper-button-pressed-bg-color: transparent;
}
.md,
.md .dark,
.md [class*='color-'] {
  --f7-stepper-fill-button-text-color: var(--f7-md-on-primary);
  --f7-stepper-fill-button-pressed-bg-color: var(--f7-theme-color);
  --f7-stepper-border-color: var(--f7-md-outline);
}

Examples

stepper.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner sliding">
        <div class="title">Stepper</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Shape and size</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <small>Default</small>
            <div class="stepper stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Round</small>
            <div class="stepper stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Fill</small>
            <div class="stepper stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Round Fill</small>
            <div class="stepper stepper-fill stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Small</small>
            <div class="stepper stepper-small stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Small Round</small>
            <div class="stepper stepper-small stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Small Fill</small>
            <div class="stepper stepper-small stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Small Round Fill</small>
            <div class="stepper stepper-small stepper-round stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Large</small>
            <div class="stepper stepper-large stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Large Round</small>
            <div class="stepper stepper-large stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Large Fill</small>
            <div class="stepper stepper-large stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Large Round Fill</small>
            <div class="stepper stepper-large stepper-round stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="block-title">Raised</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <small>Default</small>
            <div class="stepper stepper-raised stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Round</small>
            <div class="stepper stepper-raised stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Fill</small>
            <div class="stepper stepper-raised stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Round Fill</small>
            <div class="stepper stepper-raised stepper-fill stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Small</small>
            <div class="stepper stepper-raised stepper-small stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Small Round</small>
            <div class="stepper stepper-raised stepper-small stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Small Fill</small>
            <div class="stepper stepper-raised stepper-small stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Small Round Fill</small>
            <div class="stepper stepper-raised stepper-small stepper-round stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Large</small>
            <div class="stepper stepper-raised stepper-large stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Large Round</small>
            <div class="stepper stepper-raised stepper-large stepper-round stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <small>Large Fill</small>
            <div class="stepper stepper-raised stepper-large stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Large Round Fill</small>
            <div class="stepper stepper-raised stepper-large stepper-round stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Colors</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <div class="stepper stepper-init stepper-fill color-red">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-round stepper-fill stepper-init color-green">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <div class="stepper stepper-fill stepper-init color-blue">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-fill stepper-round stepper-init color-pink">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <div class="stepper stepper-small stepper-fill stepper-init color-yellow">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-small stepper-fill stepper-round stepper-init color-orange">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>

        <div class="grid grid-cols-2 grid-gap margin-top">
          <div>
            <div class="stepper stepper-small stepper-fill stepper-init color-gray">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-small stepper-round stepper-fill stepper-init color-black">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Without input element</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <div class="stepper stepper-init" data-value="0" data-min="0" data-max="100" data-step="1">
              <div class="stepper-button-minus"></div>
              <div class="stepper-value"></div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-round stepper-init" data-value="0" data-min="0" data-max="100" data-step="1">
              <div class="stepper-button-minus"></div>
              <div class="stepper-value"></div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Min, max, step</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <div class="stepper stepper-fill stepper-init">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="100" min="0" max="1000" step="100" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <div class="stepper stepper-fill stepper-round stepper-init" data-value="5" data-min="0" data-max="10"
              data-step="0.5">
              <div class="stepper-button-minus"></div>
              <div class="stepper-value"></div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Autorepeat (Tap & hold)</div>
      <div class="block-header">Pressing and holding one of its buttons increments or decrements the stepper’s value
        repeatedly. With dynamic autorepeat, the rate of change depends on how long the user continues pressing the
        control.</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="grid grid-cols-2 grid-gap">
          <div>
            <small>Default</small>
            <div class="stepper stepper-fill stepper-init" data-autorepeat="true">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
          <div>
            <small>Dynamic</small>
            <div class="stepper stepper-fill stepper-init" data-autorepeat="true" data-autorepeat-dynamic="true">
              <div class="stepper-button-minus"></div>
              <div class="stepper-input-wrap">
                <input type="text" value="0" min="0" max="100" step="1" readonly />
              </div>
              <div class="stepper-button-plus"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="block-title">Wraps</div>
      <div class="block-header">In wraps mode incrementing beyond maximum value sets value to minimum value, likewise,
        decrementing below minimum value sets value to maximum value</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <div class="stepper stepper-fill stepper-init" data-wraps="true" data-autorepeat="true"
          data-autorepeat-dynamic="true">
          <div class="stepper-button-minus"></div>
          <div class="stepper-input-wrap">
            <input type="text" value="0" min="0" max="10" step="1" readonly />
          </div>
          <div class="stepper-button-plus"></div>
        </div>
      </div>
      <div class="block-title">Custom value element</div>
      <div class="list list-strong-ios list-dividers-ios list-outline-ios">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Apples: <span id="apples-count"></span></div>
              <div class="item-after">
                <div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#apples-count">
                  <div class="stepper-button-minus"></div>
                  <div class="stepper-button-plus"></div>
                </div>
              </div>
            </div>
          </li>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Oranges: <span id="oranges-count"></span></div>
              <div class="item-after">
                <div class="stepper stepper-init stepper-small stepper-raised" data-value-el="#oranges-count">
                  <div class="stepper-button-minus"></div>
                  <div class="stepper-button-plus"></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Custom value format</div>
      <div class="list list-strong-ios list-dividers-ios list-outline-ios">
        <ul>
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">
                <div class="item-header">Meeting starts in</div>
                <span id="meeting-start-time"></span>
              </div>
              <div class="item-after">
                <div class="stepper stepper-fill stepper-small stepper-raised" id="stepper-time">
                  <div class="stepper-button-minus"></div>
                  <div class="stepper-button-plus"></div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="block-title">Manual input</div>
      <div class="block-header">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 keyboard and check fractional
        part with defined accurancy. Click outside or enter Return key, ending manual mode.</div>
      <div class="block block-strong block-outline-ios text-align-center">
        <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">
          <div class="stepper-button-minus"></div>
          <div class="stepper-input-wrap">
            <input type="text" value="0" min="0" max="1000" step="1" />
          </div>
          <div class="stepper-button-plus"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .grid small {
    display: block;
  }
</style>
<script>
  export default (props, { $f7, $on }) => {
    let stepperTime;
    $on('pageInit', () => {
      stepperTime = $f7.stepper.create({
        el: '#stepper-time',
        valueEl: '#meeting-start-time',
        min: 15, // 15 minutes min
        max: 240, // 4 hours max
        step: 15, // every 15 minutes
        value: 15,
        formatValue: function (value) {
          var hours = Math.floor(value / 60);
          var minutes = value - (hours * 60);
          var formatted = [];
          if (hours > 0) {
            formatted.push(hours + ' ' + (hours > 1 ? 'hours' : 'hour'));
          }
          if (minutes > 0) {
            formatted.push(minutes + ' minutes');
          }
          return formatted.join(' ');
        }
      })
    });
    $on('pageBeforeRemove', () => {
      stepperTime.destroy()
    });

    return $render;
  };

</script>

Improve this Doc

On this page

Stepper Layout
Stepper Modifier Classes
Stepper App Methods
Stepper Parameters
Stepper Methods & Properties
Stepper Events

DOM Events
App and Stepper Instance Events

Stepper Auto Initialization
CSS Variables
Examples