Skip to main content

Stepper

The Stepper component lets the user adjust a value by increasing and decreasing it in small steps. Steppers are used in situations where a user needs to adjust a value by a small amount.

Usage​

Use the label option to provide a label to the stepper.

All the options can be passed to the stepper via data- attributes with exceptions of the native input supported ones. The attributes that the native html input supports can be passed directly without the data- prefix. For example the value or the disabled attributes (and so on...).

<label>
    <input mbsc-stepper data-label="The label of the stepper" />
</label>

For being more informative a description and a color can also be passed to the component.

<!-- Label and description for more info -->
<label>
    <input mbsc-stepper data-label="Childrens" data-description="Number of childrens." />
</label>

<!-- Different color steppers -->
<label>
    <input mbsc-stepper data-color="danger" data-label="Danger" />
</label>
<label>
    <input mbsc-stepper color="info" label="Info" />
</label>

Auto vs. manual initialization​

If the component is added later to the DOM, e.g. with an AJAX page load, a custom function named enhance needs to be called in order to initialize the dynamically added component. When the enhance function is called on a DOM element, all form elements will be initialized inside this element.

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        var page = document.getElementById('page');
        page.innerHTML = xhr.responseText;
        mobiscroll.enhance(page);
    }
}
xhr.open('GET', '/myform', true);
xhr.send();

Options​

Explore the following API options that help you easily configure the Stepper component.

color​

"success" | "light" | "dark" | "primary" | "secondary" | "danger" | "warning" | "info"

Specifies the predefined color of the stepper.

Default value: undefined

cssClass​

string

Specifies a custom CSS class for the component.

Default value: undefined

description​

string

Specifies the description text of the stepper.

Default value: undefined

disabled​

boolean

Specifies the disabled state of the stepper.

Default value: false

inputPosition​

"center" | "end" | "start"

Specifies the input field position compared to the +/- stepper buttons.

Default value: 'center'

label​

string

Specifies the label of the stepper.

Default value: undefined

max​

number

Specifies the minimum value that can be selected.

Default value: 0

min​

number

Specifies the maximum value that can be selected.

Default value: 100

step​

number

Specifies the step between values.

Default value: 1

theme​

string

Specifies the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme, it will be chosen on the iOS platform instead of the default iOS theme.

Supplied themes:

  • 'ios' - iOS theme
  • 'material' - Material theme
  • 'windows' - Windows theme

It's possible to modify theme colors or create custom themes.

info

Make sure that the theme you set is included in the downloaded package.

Default value: undefined

themeVariant​

"auto" | "light" | "dark"

Controls which variant of the theme will be used (light or dark).

Possible values:

  • 'light' - Use the light variant of the theme.
  • 'dark' - Use the dark variant of the theme.
  • 'auto' or undefined - Detect the preferred system theme on devices where this is supported.

To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one, suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.

Default value: undefined

Events​

The Stepper component ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.

onDestroy​

(args: any, inst: any) => void

Triggered when the component is destroyed.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

onInit​

(args: any, inst: any) => void

Triggered when the component is initialized.

Parameters:

  • args - The event argument object.

  • inst - The component instance.

Localization​

The Stepper component is fully localized. This covers date and time format, button copy, rtl and more.

locale​

MbscLocale

Sets the language of the component. The locale object contains all the translations for a given language. The built in language modules are listed below. If a language is not listed, it can be provided as a custom language module.

Supported values:

  • Arabic: localeAr, 'ar'
  • Bulgarian: localeBg, 'bg'
  • Catalan: localeCa, 'ca'
  • Czech: localeCs, 'cs'
  • Chinese: localeZh, 'zh'
  • Croatian: localeHr, 'hr'
  • Danish: localeDa, 'da'
  • Dutch: localeNl, 'nl'
  • English: localeEn or undefined, 'en'
  • English (UK): localeEnGB, 'en-GB'
  • Farsi: localeFa, 'fa'
  • German: localeDe, 'de'
  • Greek: localeEl, 'el'
  • Spanish: localeEs, 'es'
  • Finnish: localeFi, 'fi'
  • French: localeFr, 'fr'
  • Hebrew: localeHe, 'he'
  • Hindi: localeHi, 'hi'
  • Hungarian: localeHu, 'hu'
  • Italian: localeIt, 'it'
  • Japanese: localeJa, 'ja'
  • Korean: localeKo, 'ko'
  • Lithuanian: localeLt, 'lt'
  • Norwegian: localeNo, 'no'
  • Polish: localePl, 'pl'
  • Portuguese (Brazilian): localePtBR, 'pt-BR'
  • Portuguese (European): localePtPT, 'pt-PT'
  • Romanian: localeRo, 'ro'
  • Russian: localeRu, 'ru'
  • Russian (UA): localeRuUA, 'ru-UA'
  • Slovak: localeSk, 'sk'
  • Serbian: localeSr, 'sr'
  • Swedish: localeSv, 'sv'
  • Thai: localeTh, 'th'
  • Turkish: localeTr, 'tr'
  • Ukrainian: localeUa, 'ua'

Default value: undefined

rtl​

boolean

Enables right-to-left display.

Default value: false