General Date & Time pickers Event Calendar Form components Gesture enabled responsive list Numeric pickers Pickers & dropdowns Page layout & navigation Tools Accessibility

Measurement

Basic usage

Component

Simple examples with ngModel
<!-- the basic options passed within an object -->
<mbsc-measurement [options]="currencyOptions" [(ngModel)]="mySum">Pick sum</mbsc-measurement>
	
import { MbscMeasurementOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';

export class MyExampleComponent {
    currencyOptions: MbscMeasurementOptions = {
        units: ['EUR', 'USD', 'GBP', 'CHF'],
        defaultUnit: 'EUR',
        min: 0,
        max: 150,
        step: 0.05,
        convert: function (val, unit1, unit2) {
            var multipliers = {
                EUR: 1,
                GBP: 0.772,
                CHF: 1.105,
                USD: 1.110
            };
            return val * multipliers[unit2] / multipliers[unit1];
        }
    };
}
	

Passing events

All events can be used inline with the component. When passing event handlers inline, the instance of the component becomes the inst property of the event object.

Passing inline event handlers
<!-- simple handler -->
<mbsc-measurement [(ngModel)]="mySum" (onSet)="sumSet()">My Sum</mbsc-measurement>
<!-- with default parameters -->
<mbsc-measurement [(ngModel)]="mySum" (onSet)="withDefaultEvent($event)">My Sum</mbsc-measurement>
<!-- with additional parameters -->
<mbsc-measurement [(ngModel)]="mySum" (onSet)="withAdditionalEvent($event, 'myAddition')">My Sum</mbsc-measurement>
export class MyExampleClass {
    mySum: number;

    // simple handler without any parameters
    sumSet() {
        console.log('simple handler'); // prints 'simple handler'
    }

    // event handler with the default event parameter
    withDefaultEvent(event: any) {
        console.log(event, event.inst); // prints the event object and the mobiscroll measurement control instance
    }

    // event handler with additional parameters
    withAdditionalEvent(event: any, addition: string) {
        console.log(addition); // prints 'myAddition'
    }
}

If you need more customization options on the element, you can use the directives as follows

Here is an example for the Measurement directive with ngModel
import { MbscMeasurementOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';
@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myMoney" mbsc-measurement [mbsc-options]="myOptions" />`
})
export class MyExampleComponent {
    myMoney: string = '1 EUR';
    myOptions: MbscMeasurementOptions = {
        units: ['EUR', 'USD', 'GBP', 'CHF'],
        defaultUnit: 'EUR',
        min: 0,
        max: 150,
        step: 0.05,
        convert: function (val, unit1, unit2) {
            var multipliers = {
                EUR: 1,
                GBP: 0.772,
                CHF: 1.105,
                USD: 1.110
            };
            return val * multipliers[unit2] / multipliers[unit1];
        }
    };
}

Using with Ionic

Simple ionic input
<ion-item>
    <ion-label>My Money</ion-label>
    <ion-input [(ngModel)]="myMoney" mbsc-measurement [mbsc-options]="myOptions"></ion-input>
</ion-item>

Modules

The MbscMeasurementModule can be used to import all the directives and components from below.

Directives

Directive Data type Description
[(mbsc-measurement)] string Directve for the measurement scroller
[mbsc-options] MbscMeasurementOptions Directive used to pass the mobiscroll options

Components

Component Description
<mbsc-measurement> Component for the measurement control

The following options can be used as attributes to customize the component.

Options

Name Type Default value Description
anchor String, HTMLElement undefined Specifies the anchor element for positioning, if display is set to 'bubble' . If undefined, it defaults to the element on which the component was initialized.
animate String or Boolean undefined Animation to use for show/hide (if display is not inline). Possible values:
  • 'fade'
  • 'flip'
  • 'pop'
  • 'swing'
  • 'slidevertical'
  • 'slidehorizontal'
  • 'slidedown'
  • 'slideup'
If false, turns the animation off.
buttons Array ['set', 'cancel'] Buttons to display. Each item in the array will be a button. A button can be specified as a string, or as a button object.

When the passed array does not contain the predefined 'set' button, the auto-selection will be turned on. Selecting a value on the UI this way, will be set to the input immediately. If there are more than one wheels shown, the control will close on overlay tap. Otherwise tapping a value on the wheel will also close the control.

If a string, it must be one of the predefined buttons:
  • 'set' - Sets the value.
  • 'clear' - Clears the value.
  • 'cancel' - Dismisses the popup.
To modify the text of the predefined buttons, you can use the setText, clearText , cancelText settings.

If an object, it may have the following properties:
  • text String - Text of the button.
  • handler String, Function - The function which will run when the button is pressed. If a string, it must be one of the predefined button handlers:
    • 'set' - Sets the value.
    • 'clear' - Clears the value.
    • 'cancel' - Dismisses the popup.
  • icon String (Optional) - Icon of the button.
  • cssClass String (Optional) - Css class of the button.
Predefined and custom buttons example
buttons: [
    'set',
    {
        text: 'Custom',
        icon: 'checkmark',
        cssClass: 'my-btn', 
        handler: (event, inst) => {
            alert('Custom button clicked!');
        }
    },
    'cancel'
]
Predefined button handler example
buttons: [
    'set',
    {
        text: 'Hide',
        handler: 'cancel',
        icon: 'close',
        cssClass: 'my-btn'
    }
]
circular Boolean, Array undefined If true, the scroll wheels are circular. If an array, it can be specified as a per wheel configuration, e.g. for 3 wheels: [true, false, false] - sets the first wheel circular. If not specified, if a wheel has more values than the number of displayed rows, the scroll wheel becomes circular.
closeOnOverlayTap Boolean true If true, the popup is closed on overlay tap/click.
context String, HTMLElement 'body' The DOM element in which the component is appended and positioned (if not inline). Can be a selector string or a DOM element.
convert Boolean true Convert value when changing measurement unit
cssClass String undefined Applies custom css class to the top level element.
defaultValue String undefined Initial value of the picker. If the string does not contain the unit, the default unit will be used.
disabled Boolean false Initial disabled state of the component.
display String 'center' Controls the positioning of the component. Possible options:
  • 'center' - The component appears as a popup at the center of the viewport.
  • 'inline' - If called on div element, the component is placed inside the div (overwriting existing content), otherwise is placed after the original element.
  • 'bubble' - The component appears as a bubble positioned to the element defined by the anchor option. By default the anchor is the original element.
  • 'top' - The component appears docked to the top of the viewport.
  • 'bottom' - The component appears docked to the bottom of the viewport.
focusOnClose Boolean, String, HTMLElement true Element to focus after the popup is closed. If undefined, the original element will be focused. If false, no focusing will occur.
focusTrap Boolean true If not in inline mode, focus won't be allowed to leave the popup.
headerText Boolean, String, Function false Specifies a custom string which appears in the popup header.
If the string contains the '{value}' substring, it is replaced with the formatted value of the measurement.
If it's set to false, the header is hidden.
If a function is passed, it receives the formatted value as parameter and the returned value appears in the header.
height Number 40 Height in pixels of one item on the wheel. The default value depends on the theme:

Mobiscroll: 40
Android Holo: 36
Bootstrap: 40
iOS: 34
jQuery Mobile: 40
Material: 40
Windows Phone: 76
invalid Array undefined An array containing the invalid values.
layout String undefined Sets the layout of the component. Possible values:
  • 'liquid' - Wheels will expand to the maximum available width, but will not exceed the width set by the maxWidth setting. If maxWidth is not specified, the total width of all wheels will not exceed 600px. In 'top' or 'bottom' display mode this is the default behavior.
  • 'fixed' or undefined - Wheels will expand to the size of the longest wheel value, but will not exceed the width set by the maxWidth setting.
max Number 100 Maximum value.
maxWidth Number or Array undefined Maximum width of the wheels. If number, it is applied to all wheels, if an array, it is applied to each wheel separately.
min Number 0 Minimum value.
minWidth Number or Array 80 Minimum width of the wheels in pixels. If number, it is applied to all wheels, if an array, it is applied to each wheel separately. The default value depends on the theme:

Mobiscroll: 80
Android Holo: 76
Bootstrap: 80
iOS: 55
jQuery Mobile: 80
Material: 80
Windows Phone: 76
multiline Number 1 If greater than 1, the wheel item's content will be wrapped into the specified number of lines. If the content is shorter, it will remain vertically centered.
readonly Boolean or Array false If true, the component is displayed, but the values are not selectable. If an array, it can be specified as a per wheel configuration, e.g. for 3 wheels: [true, false, false] - sets the first wheel readonly.
responsive Object undefined Specify different settings for different viewport widths, in a form of an object, where the keys are the name of the breakpoints, and the values are objects containing the settings for the given breakpoint.

There are five predefined breakpoints:
  • xsmall - min-width: 0px
  • small - min-width: 576px
  • medium - min-width: 768px
  • large - min-width: 992px
  • xlarge - min-width: 1200px
Custom breakpoints can be defined by passing an object containing the breakpoint property specifying the min-width in pixels. Example:
responsive: {
    small: {
        display: 'bottom'
    },
    custom: { // Custom breakpoint
        breakpoint: 600,
        display: 'center'
    },
    large: {
        display: 'bubble'
    }
}
rows Number 3 Number of visible rows on the wheel. The default value depends on the theme:

Mobiscroll: 5
Bootstrap: 3
iOS: 5
Material: 3
Windows: 6
scale Number 2 Controls the decimal precision for the scrollers.
scrollLock Boolean true Disables page scrolling on touchmove (if not in inline mode, and popup height is less than window height).
showOnFocus Boolean false - on desktop true - on mobile Pops up the component on element focus.
showOnTap Boolean true Pops up the component on element tap.
showOverlay Boolean true Show or hide overlay.
showScrollArrows Boolean false Display scroll arrows for the wheels.
step Float 0.05 Step (precision) between values.
theme String undefined Sets the visual appearance of the component.

If it is 'auto' or undefined, the theme will automatically be chosen based on the platform. If the theme for the specific platform is not present, it will default to the Mobiscroll theme.

Supplied themes:
  • 'bootstrap' - Bootstrap themes
  • 'ios' - iOS theme
  • 'ios-dark' - iOS dark theme (deprecated)
  • 'material' - Material theme
  • 'material-dark' - Material dark theme (deprecated)
  • 'mobiscroll' - Mobiscroll theme
  • 'mobiscroll-dark' - Mobiscroll dark theme (deprecated)
  • 'windows' - Windows theme
  • 'windows-dark' - Windows dark theme (deprecated)
It's possible to modify theme colors or create custom themes.
Starting from v4.9.0 setting directly the dark version of the theme is deprecated. Use the themeVariant setting instead to control the light / dark appearance of the theme.
Make sure that the theme you set is included in the downloaded package.
themeVariant String undefined 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.

If not set, only the theme setting will determine which theme to use.

To use the setting 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'.
The setting will not have any effect if the theme setting explicitly sets the dark version of a theme, e.g. theme: 'ios-dark'.
touchUi Boolean true Use true to render a touch optimized user interface, or false for a user interface optimized for pointer devices (mouse, touchpad). Can be used with the responsive setting to change the user interface based on viewport width.
width Number, Array 70 Exact width of the wheels, in pixels. Wheel content will be truncated, if it exceeds the width. If number, it is applied to all wheels, if an array, it is applied to each wheel separately.

Setting options runtime (changing options dynamically)

There are two ways to modify options after initalization

  1. Using the option method.

    The option method always triggers reinitialization. Most of the settings can be updated only this way, updating without initialization has no effect, because the markup is already generated. If the scroller was visible, the reinitialization hides it and it's not shown again automatically (except in inline display mode).

    Here is an example for the dynamic option change
    import { ViewChild } from '@angular/core';
    @Component({
        selector: 'my-example',
        template: `
            <input mbsc-measurement #myVariable="mobiscroll" [(ngModel)]="myExample"/>
            <button (click)="changeOptions()">Change theme and language</button>
        `
    })
    export class MyExample {
        @ViewChild('myVariable') 
        myRef: any;
    
        // Modify options
        changeOptions() {
            this.myRef.instance.option({
                theme: 'mobiscroll',
                lang: 'de'
            });
        }
    }
  2. Modify directly the settings object.

    Useful when changing dynamic settings, which do not need redraw (e.g. readonly, calendar marked days).

    Example
    import { ViewChild } from '@angular/core';
    @Component({
        selector: 'my-example',
        template: `
            <input mbsc-measurement #myVariable="mobiscroll" [mbsc-options]="myOptions"/>
            <button (click)="changeOptions()">Change readonly</button>
        `
    })
    export class MyExample {
        @ViewChild('myVariable') 
        myRef: any;
    
        // get instance and modify a setting
        changeOptions() {
            this.myRef.instance.settings.readonly = true;
        }
        
        // Modify settings in an event
        myOptions: any = {
            onBeforeShow: (event, inst) => {
                inst.settings.readonly = true;
            }
        }
    }

Events

Using arrow functions is recommended so you have access to your outer component instance inside event handlers through this reference.
When using the events inline (see here) the inst parameter is passed as a property to the event.
Name Description
onBeforeClose(event, inst) Triggered before the component closes. Close can be prevented by returning false from the handler function.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
    • button: String - The name of the button which triggered the component to close ('set', or 'cancel').
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onBeforeClose: (event, inst) => {
        }
    }
}
onBeforeShow(event, inst) Triggered before the component is shown. It is useful if you want to modify the settings object before generating the markup. It can be used also to prevent the showing the control by returning false.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onBeforeShow: (event, inst) => {
        }
    }
}
onCancel(event, inst) Allows you to define your own event when cancel is pressed.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onCancel: (event, inst) => {
        }
    }
}
onChange(event, inst) Allows you to define your own event when a wheel value is changed.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onChange: (event, inst) => {
        }
    }
}
onClear(event, inst) Triggered when the value is cleared.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onClear: (event, inst) => {
        }
    }
}
onClose(event, inst) Triggered when the component is closed.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onClose: (event, inst) => {
        }
    }
}
onDestroy(event, inst) Triggered when the component is destroyed.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onDestroy: (event, inst) => {
        }
    }
}
onInit(event, inst) Triggered when the component is initialized.

Parameters

  • event: Object - The event object.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onInit: (event, inst) => {
        }
    }
}
onItemTap(event, inst) Triggered when the user taps an item on the wheel.

Parameters

  • event: Object - The event object has the following properties:
    • target: HTMLElement - The DOM element of the tapped item.
    • selected: Boolean - Selected state of the tapped item.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onItemTap: (event, inst) => {
        }
    }
}
onMarkupReady(event, inst) Triggered when the html markup of the component is generated, but it is not yet shown. It is useful, if you want to make modifications to the markup (e.g. add custom elements), before the positioning runs.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element containing the generated html.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onMarkupReady: (event, inst) => {
        }
    }
}
onPosition(event, inst) Triggered when the component is positioned (on initial show and resize / orientation change).
Useful if dimensions needs to be modified before the positioning happens, e.g. set a custom width or height. Custom positioning can also be implemented here, in this case, returning false from the handler function will prevent the built in positioning.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element containing the generated html.
    • windowWidth: Number - The window width.
    • windowHeight: Number - The window height.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onPosition: (event, inst) => {
        }
    }
}
onSet(event, inst) Triggered when a value is set.

Parameters

  • event: Object - The event object has the following properties:
    • valueText: String - The selected value as text (if any).
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onSet: (event, inst) => {
        }
    }
}
onShow(event, inst) Triggered when the component is shown.

Parameters

  • event: Object - The event object has the following properties:
    • target: Object - The DOM element containing the generated html.
    • valueText: String - The selected value as text.
  • inst: Object - The instance object of the measurement.

Example

export class MyExample {
    settings: any = {
        onShow: (event, inst) => {
        }
    }
}

Methods

Name Description
cancel() Hides the measurement and also invokes the onCancel event.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.cancel();
clear() Clears the measurement value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.clear();
disable() Disables the measurement.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.disable();
enable() Enables the measurement.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.enable();
getVal([temp]) Returns the selected measurement value.

Parameters

  • temp (Optional): Boolean - If true, returns the temporary values (prior clicking the Set button).

Returns: String

  • The selected measurement value.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.getVal();
hide([ prevAnim ] [, btn ]) Hides the component.

Parameters

  • prevAnim (Optional): Boolean - If true, hide will not be animated.
  • btn (Optional): String - Specifies which button caused the component to hide, and it's passed to the onBeforeClose event.

Example

Methods can be called on an instance. For more details see calling methods
    mobiscrollInstance.hide();
    
isVisible() Returns a boolean indicating whether the component is visible or not.

Returns: Boolean

  • True if the component is visible, false if it's not.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.isVisible();
option(options) Sets one or more options for the component.

Parameters

  • options: Object - A map of option-value pairs to set.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.option({
    display: 'bottom',
    lang: 'de'
});
position([check]) Recalculates the position of the component (if not inline).

Parameters

  • check (Optional): Boolean - If true, the function checks if viewport size changed after last position call, if false or ommitted, position is recalculated anyway.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.position();
select() Hides the measurement and also invokes the onSet event.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.select();
setVal(value [, fill ] [, change ] [, temp ] [, time ]) Sets the measurement value.

Parameters

  • value: String - The measurement value.
  • fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
  • change (Optional): Boolean - If false, change event won't be triggered on the input element.
  • temp (Optional): Boolean - If true, only temporary value is set.
  • time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

Methods can be called on an instance. For more details see calling methods
show([ prevAnim ] [, prevFocus ]) Shows the component.

Parameters

  • prevAnim (Optional): Boolean - If true, show will not be animated.
  • prevFocus (Optional): Boolean - If true, the popup will not be focused right after show.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.show();
tap(el, handler) Attaches the handler function to the tap event of element el.

Parameters

  • el: Object - The element with tap event.
  • handler: Function - If the action was initiated with touch event, handler is called on touchend, otherwise on click.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.tap('#element', function () { alert("It's a tap!"); });

Temperature

Basic usage

Simple examples with ngModel
<!-- the simple default -->
<mbsc-temperature [(ngModel)]="outside">Outside temp.</mbsc-temperature>

<!-- setting theme and other options inline -->
<mbsc-temperature theme="ios" display="top" [(ngModel)]="room">Room temperature</mbsc-temperature>

<!-- passing event handlers -->
<mbsc-temperature (onSet)="setMyTemp($event)">Room temperature</mbsc-temperature>
export class MyExampleClass {
    setMyTemp(event: any) {
        alert('Desired room temperature choosen: ' + event.inst.getVal());
    }
}

If you need more customization options on the element, you can use the directives as follows

Here is an example for the temperature directive with ngModel
@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myTempOutside" mbsc-temperature />`
})
export class MyExampleComponent {
    myTempOutside: string = '73.40 °F';
}
Example for the temperature directive without ngModel
@Component({
    selector: 'my-example',
    template: `<input [(mbsc-temperature)]="myTempOutside" />`
})
export class MyExampleComponent {
    myTempOutside: string = '-2 °C';
}
The temperature directive with additional options
import { MbscTemperatureOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';

@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myTempOutside" mbsc-temperature [mbsc-options]="myOptions" />`
})
export class MyExampleComponent {
    myTempOutside: string = '73.40 °F';
    myOptions: MbscTemperatureOptions = {
        theme: 'ios',
        display: 'center'
    };
}

Using with Ionic

Using with Ionic input
<ion-item>
    <ion-label>Outside Temp.</ion-label>
    <ion-input [(ngModel)]="myTempOutside" mbsc-temperature></ion-input>
</ion-item>

Directives

Directive Data type Description
[(mbsc-temperature)] string Directve for the temperature scroller
[mbsc-options] MbscTemperatureOptions Directive used to pass the mobiscroll options

Components

Component Description
<mbsc-temperature> Component for the temperature control

The following options can be used as attributes to customize the component.

Options

Name Type Default value Description
defaultUnit String 'c' Default unit, used for min, max and invalid values.
max Number 40 Maximum value.
min Number -20 Minimum value.
unitNames Object { c: '°C', k: 'K', f: '°F', r: '°R' } Display names of the units, which will appear on the unit wheel. If some or all of the units are missing, it will revert to the value from the 'units' array
units Array ['c', 'k', 'f', 'r'] A list containing the conversion units. Possible values:
  • c - Celsius
  • k - Kelvin
  • f - Fahrenheit
  • r - Rankine

Methods

Name Description
setVal(value [, fill ] [, change ] [, temp ] [, time ]) Sets the measurement value.

Parameters

  • value: String - The measurement value.
  • fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
  • change (Optional): Boolean - If false, change event won't be triggered on the input element.
  • temp (Optional): Boolean - If true, only temporary value is set.
  • time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal('5.00 °C');

Speed

Basic usage

Simple examples with ngModel
<!-- the simple default -->
<mbsc-speed [(ngModel)]="car">My Car Speed</mbsc-speed>

<!-- setting theme and other options inline -->
<mbsc-speed theme="ios" display="top" [(ngModel)]="fan">Fan speed</mbsc-speed>

<!-- passing event handlers -->
<mbsc-speed (onSet)="setFanSpeed($event)">Fan speed</mbsc-speed>
export class MyExampleClass {
    setFanSpeed(event: any) {
        alert('Desired fan speed set: ' + event.inst.getVal());
    }
}

If you need more customization options on the element, you can use the directives as follows

Here is an example for the speed directive with ngModel
@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="mySpeed" mbsc-speed />`
})
export class MyExampleComponent {
    mySpeed: string = '5 m/s';
}
Example for the speed directive without ngModel
@Component({
    selector: 'my-example',
    template: `<input [(mbsc-speed)]="mySpeed" />`
})
export class MyExampleComponent {
    mySpeed: string = '5 m/s';
}
The speed directive with additional options
import { MbscSpeedOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';

@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="mySpeed" mbsc-speed [mbsc-options]="myOptions" />`
})
export class MyExampleComponent {
    mySpeed: string = '5 m/s';
    myOptions: MbscSpeedOptions = {
        theme: 'ios',
        display: 'top'
    };
}

Using with Ionic

Using with Ionic input
<ion-item>
    <ion-label>My Speed</ion-label>
    <ion-input [(ngModel)]="mySpeed" mbsc-speed></ion-input>
</ion-item>

Directives

Directive Data type Description
[(mbsc-speed)] string Directve for the speed scroller
[mbsc-options] MbscSpeedOptions Directive used to pass the mobiscroll options

Components

Component Description
<mbsc-speed> Component for the speed control

The following options can be used as attributes to customize the component.

Options

Name Type Default value Description
defaultUnit String 'kph' Default unit, used for min, max and invalid values.
unitNames Object { kph: 'km/h', mph: 'mi/h', mps: 'm/s', fps: 'ft/s', knot: 'knot' } Display names of the units, which will appear on the unit wheel. If some or all of the units are missing, it will revert to the value from the 'units' array
units Array ['kph', 'mph', 'mps', 'fps', 'knot'] A list containing the conversion units. Possible values:
  • kph - Kilometers per hour
  • mph - Miles per hour
  • mps - Meters per second
  • fps - Feet per second
  • knot - Knot

Methods

Name Description
setVal(value [, fill ] [, change ] [, temp ] [, time ]) Sets the measurement value.

Parameters

  • value: String - The measurement value.
  • fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
  • change (Optional): Boolean - If false, change event won't be triggered on the input element.
  • temp (Optional): Boolean - If true, only temporary value is set.
  • time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal('50.00 km/h');

Distance

Basic usage

Simple examples with ngModel
<!-- the simple default -->
<mbsc-distance [(ngModel)]="toWork">Distance to workplace</mbsc-distance>

<!-- setting theme and other options inline -->
<mbsc-distance theme="ios" display="top" [(ngModel)]="toSchool">Distance to School</mbsc-distance>

<!-- passing event handlers -->
<mbsc-distance (onSet)="setDistance($event)">Distance to market</mbsc-distance>
export class MyExampleClass {
    setDistance(event: any, inst: any) {
        alert('New distance set: ' + inst.getVal());
    }
}

If you need more customization options on the element, you can use the directives as follows

Here is an example for the distance directive with ngModel
@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myDistance" mbsc-distance />`
})
export class MyExampleComponent {
    myDistance: string = '5 km';
}
Example for the distance directive without ngModel
@Component({
    selector: 'my-example',
    template: `<input [(mbsc-distance)]="myDistance" />`
})
export class MyExampleComponent {
    myDistance: string = '5 km';
}
The distance directive with additional options
import { MbscDistanceOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';

@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myDistance" mbsc-distance [mbsc-options]="distanceSettings" />`
})
export class MyExampleComponent {
    myDistance: string = '5 km';
    distanceSettings: MbscDistanceOptions = {
        theme: 'ios',
        display: 'bottom'
    }
}

Using with Ionic

Using with Ionic input
<ion-item>
    <ion-label>My Distance</ion-label>
    <ion-input [(ngModel)]="myDistance" mbsc-distance></ion-input>
</ion-item>

Directives

Directive Data type Description
[(mbsc-distance)] string Directve for the distance scroller
[mbsc-options] MbscDistanceOptions Directive used to pass the mobiscroll options

Components

Component Description
<mbsc-distance> Component for the distance control

The following options can be used as attributes to customize the component.

Options

Name Type Default value Description
defaultUnit String 'km' Default unit, used for min, max and invalid values.
units Array ['m', 'km', 'in', 'ft', 'yd', 'mi'] A list containing the conversion units. Possible values:
  • mm - Milimeters
  • cm - Centimeters
  • dm - Decimeters
  • m - Meters
  • dam - Decameters
  • hm - Hectometers
  • km - Kilometers
  • in - Inches
  • ft - Feet
  • yd - Yards
  • ch - Chains
  • fur - Furlongs
  • mi - Miles
  • lea - Leagues

Methods

Name Description
setVal(value [, fill ] [, change ] [, temp ] [, time ]) Sets the measurement value.

Parameters

  • value: String - The measurement value.
  • fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
  • change (Optional): Boolean - If false, change event won't be triggered on the input element.
  • temp (Optional): Boolean - If true, only temporary value is set.
  • time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal('50.00 km');

Mass

Basic usage

Simple examples with ngModel
<!-- the simple default -->
<mbsc-mass [(ngModel)]="myWeight">My Weight</mbsc-mass>

<!-- setting theme and other options inline -->
<mbsc-mass theme="ios" display="top" [(ngModel)]="package">Package Weight</mbsc-mass>

<!-- passing event handlers -->
<mbsc-mass (onSet)="setPackageWeight($event)">Package Weight</mbsc-mass>
export class MyExampleClass {
    setPackageWeight(event: any) {
        alert('Package weight set: ' + event.inst.getVal());
    }
}

If you need more customization options on the element, you can use the directives as follows

Here is an example for the mass directive with ngModel
@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myWeight" mbsc-mass />`
})
export class MyExampleComponent {
    myWeight: string = '1 kg';
}
Example for the mass directive without ngModel
@Component({
    selector: 'my-example',
    template: `<input [(mbsc-mass)]="myWeight" />`
})
export class MyExampleComponent {
    myWeight: string = '1 kg';
}
he mass directive with additional options
import { MbscMassOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';

@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myWeight" mbsc-mass [mbsc-options]="myOptions" />`
})
export class MyExampleComponent {
    myWeight: string = '1 kg';
    myOptions: MbscMassOptions = {
        theme: 'ios',
        display: 'bottom'
    }
}

Using with Ionic

Simple ionic input
<ion-item>
    <ion-label>My Weight</ion-label>
    <ion-input [(ngModel)]="myWeight" mbsc-mass></ion-input>
</ion-item>

Directives

Directive Data type Description
[(mbsc-mass)] string Directve for the mass scroller
[mbsc-options] MbscMassOptions Directive used to pass the mobiscroll options

Components

Component Description
<mbsc-mass> Component for the mass control

The following options can be used as attributes to customize the component.

Options

Name Type Default value Description
defaultUnit String 'kg' Default unit, used for min, max and invalid values.
max Number 1000 Maximum value.
unitNames Object { tlong: 't (long)', tshort: 't (short)' } Display names of the units, which will appear on the unit wheel. If some or all of the units are missing, it will revert to the value from the 'units' array
units Array ['g', 'kg', 'oz', 'lb'] A list containing the conversion units. Possible values:
  • mg - Miligrams
  • cg - Centigrams
  • dg - Decigrams
  • g - grams
  • dag - Decagrams
  • hg - Hectograms
  • kg - Kilograms
  • drc - Drachm
  • oz - Ounces
  • lb - Pounds
  • st - Stones
  • cwt - Hundredweights
  • tlong - Long ton
  • tshort - Short ton

Methods

Name Description
setVal(value [, fill ] [, change ] [, temp ] [, time ]) Sets the measurement value.

Parameters

  • value: String - The measurement value.
  • fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
  • change (Optional): Boolean - If false, change event won't be triggered on the input element.
  • temp (Optional): Boolean - If true, only temporary value is set.
  • time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal('50.00 kg');

Force

Basic usage

Simple examples with ngModel
<!-- the simple default -->
<mbsc-force [(ngModel)]="force">Applied force</mbsc-force>

<!-- setting theme and other options inline -->
<mbsc-force theme="ios" display="top" [(ngModel)]="force">Applied force</mbsc-force>

<!-- passing event handlers -->
<mbsc-force (onSet)="setForce($event)">Applied force</mbsc-force>
export class MyExampleClass {
    setForce(event: any) {
        alert('Applied force: ' + event.inst.getVal());
    }
}

If you need more customization options on the element, you can use the directives as follows

Here is an example for the force directive with ngModel
@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myForce" mbsc-force />`
})
export class MyExampleComponent {
    myForce: string = '5 N';
}
Example for the force directive without ngModel
@Component({
    selector: 'my-example',
    template: `<input [(mbsc-force)]="myForce" />`
})
export class MyExampleComponent {
    myForce: string = '5 N';
}
The force directive with additional settings
import { MbscForceOptions } from '../lib/mobiscroll/js/mobiscroll.angular.min.js';

@Component({
    selector: 'my-example',
    template: `<input [(ngModel)]="myForce" mbsc-force [mbsc-options]="forceOptions" />`
})
export class MyExampleComponent {
    myForce: string = '5 N';
    forceOptions: MbscForceOptions = {
        theme: 'ios',
        display: 'top'
    }
}

Using with Ionic

Simple ionic input
<ion-item>
    <ion-label>My Force</ion-label>
    <ion-input [(ngModel)]="myForce" mbsc-force></ion-input>
</ion-item>

Directives

Directive Data type Description
[(mbsc-force)] string Directve for the force scroller
[mbsc-options] MbscForceOptions Directive used to pass the mobiscroll options

Components

Component Description
<mbsc-force> Component for the force control

The following options can be used as attributes to customize the component.

Options

Name Type Default value Description
defaultUnit String 'N' Default unit, used for min, max and invalid values.
units Array ['N', 'kp', 'lbf', 'pdl'] A list containing the conversion units. Possible values:
  • N - Newton
  • kp - Kilopond
  • lbf - Pound-force
  • pdl - Poundal

Methods

Name Description
setVal(value [, fill ] [, change ] [, temp ] [, time ]) Sets the measurement value.

Parameters

  • value: String - The measurement value.
  • fill (Optional): Boolean - If true, the associated input element is also updated with the new value.
  • change (Optional): Boolean - If false, change event won't be triggered on the input element.
  • temp (Optional): Boolean - If true, only temporary value is set.
  • time (Optional): Number - Specifies the duration of the animation in seconds to scroll the wheels to the new values. There is no animation, if time is omitted or 0.

Example

Methods can be called on an instance. For more details see calling methods
mobiscrollInstance.setVal('50.00 N');

Localization

Name Type Default value Description
cancelText String 'Cancel' Text for Cancel button.
clearText String 'Clear' Text for Clear button.
decimalSeparator String '.' Separates the integer part from the fractional part of the numeric value.
fractionText String 'Fraction' Label for the fraction wheel.
headerText Boolean, String, Function '{value}' Specifies a custom string which appears in the popup header.
If the string contains '{value}' substring, it is replaced with the formatted value of the measurement.
If it's set to false, the header is hidden.
If a function is passed, it receives the formatted value as parameter and the returned value appears in the header.
lang String 'en-US' Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
  • Arabic: 'ar'
  • Bulgarian: 'bg'
  • Catalan: 'ca'
  • Czech: 'cs'
  • Chinese: 'zh'
  • Croatian: 'hr'
  • Danish: 'da'
  • Dutch: 'nl'
  • English: 'en' or 'en-US' or undefined
  • English (UK): 'en-UK' or 'en-GB'
  • Farsi: 'fa'
  • German: 'de'
  • Greek: 'el'
  • Spanish: 'es'
  • Finnish: 'fi'
  • French: 'fr'
  • Hebrew: 'he'
  • Hindi: 'hi'
  • Hungarian: 'hu'
  • Italian: 'it'
  • Japanese: 'ja'
  • Korean: 'ko'
  • Lithuanian: 'lt'
  • Norwegian: 'no'
  • Polish: 'pl'
  • Portuguese (Brazilian): 'pt-BR'
  • Portuguese (European): 'pt-PT'
  • Romanian: 'ro'
  • Russian: 'ru'
  • Russian (UA): 'ru-UA'
  • Slovak: 'sk'
  • Serbian: 'sr'
  • Thai: 'th'
  • Swedish: 'sv'
  • Turkish: 'tr'
  • Ukrainian: 'ua'
  • Vietnamese: 'vi'
rtl Boolean false Right to left display.
selectedPluralText String '{count} selected' Specifies the plural form of the amount of selected items according to the rules of particular language. The '{count}' substring will be replaced with the number of selected items.
selectedText String '{count} selected' Specifies the amount of selected items according to the rules of particular language. The '{count}' substring will be replaced with the number of selected items.
setText String 'Set' Text for Set button.
signText String ' ' Label for the sign wheel.
wholeText String 'Whole' Label for the whole wheel.

Customizing the appearance

While the provided pre-built themes are enough in many use cases, most of the times on top of adapting to a specific platform, you'd also like to match a brand or color scheme. Mobiscroll provides various ways to achieve this:

Override the Sass Color Variables

A convenient way to customize the colors of the Mobiscroll components is to override the Sass color variables.

Let's say your branding uses a nice red accent color, and you'd like that color to appear on the Mobiscroll components as well, while still using platform specific themes (e.g. ios on iOS devices, material on Android devices, and mobiscroll on desktop). You can override the accent color for every theme:

$mbsc-ios-accent: #e61d2a;
$mbsc-material-accent: #e61d2a;
$mbsc-mobiscroll-accent: #e61d2a;

@import "~@mobiscroll/Angular/dist/css/mobiscroll.angular.scss"
It's important that you override the variables BEFORE the scss file import, otherwise it won't make any difference.
Here's a complete guide on how to set up Mobiscroll with SASS support

You can also customize the colors on many levels:

  1. Theme specific variables (ex. $mbsc-material-background, $mbsc-ios-dark-text) are applied to all components in a theme. Complete list of variables here.
  2. Component specific global variables (ex. $mbsc-card-background-light, $mbsc-listview-text-dark) are applied to all themes for a specific component.
  3. Component and theme specific variables (ex. $mbsc-ios-dark-form-background, $mbsc-material-input-text) are applied to a specific theme and a specific component.

Hereinafter you will see all the variables that are specific to the Measurement component or affect its look:

Global variables

These variables are applied to all base themes: iOS, material, windows and mobiscroll.
They all come in pairs. One for the light and one for the dark variant in each theme.

Variable name Description
$mbsc-frame-background-light Sets the background color of the Measurement
$mbsc-frame-background-dark
$mbsc-frame-text-light Sets the text color of the Measurement
$mbsc-frame-text-dark
$mbsc-frame-accent-light Sets the accent color of the Measurement
$mbsc-frame-accent-dark
$mbsc-frame-overlay-light Sets the color of the overlay, when the Measurement is shown as a modal
$mbsc-frame-overlay-dark

If you really want to get sophisticated or if a color doesn't look good on a specific theme and you want to overwrite it, you can fine tune all of the above variables individually for each theme. Below are the complete list of variables broken down to themes:

iOS theme

Variable name Default value Description
$mbsc-ios-frame-background
#ffffff
The Measurement background color
$mbsc-ios-frame-text
#000000
The Measurement text color
$mbsc-ios-frame-accent
#007bff
The Measurement accent color
$mbsc-ios-frame-overlay
rgba(0, 0, 0, 0.2)
Sets the color of the overlay, when the Measurement is shown as a modal

iOS Dark theme

$mbsc-ios-dark-frame-background
#0f0f0f
The Measurement background color
$mbsc-ios-dark-frame-text
#ffffff
The Measurement text color
$mbsc-ios-dark-frame-accent
#ff8400
The Measurement accent color
$mbsc-ios-dark-frame-overlay
rgba(255, 255, 255, .1)
Sets the color of the overlay, when the Measurement is shown as a modal
Indication on what the color variables affect

Windows theme

Variable name Default value Description
$mbsc-windows-frame-background
#1a1a1a
The Measurement background color
$mbsc-windows-frame-text
#262626
The Measurement text color
$mbsc-windows-frame-accent
#0078d7
The Measurement accent color
$mbsc-windows-frame-overlay
rgba(0, 0, 0, .7)
Sets the color of the overlay, when the Measurement is shown as a modal

Windows Dark theme

Variable name Default value Description
$mbsc-windows-dark-frame-background
#191919
The Measurement background color
$mbsc-windows-dark-frame-text
#ffffff
The Measurement text color
$mbsc-windows-dark-frame-accent
#0078d7
The Measurement accent color
$mbsc-windows-dark-frame-overlay
rgba(0, 0, 0, .7)
Sets the color of the overlay, when the Measurement is shown as a modal
Indication on what the color variables affect

Material theme

Variable name Default value Description
$mbsc-material-frame-background
#eeeeee
The Measurement background color
$mbsc-material-frame-text
#5b5b5b
The Measurement text color
$mbsc-material-frame-accent
#009688
The Measurement accent color
$mbsc-material-frame-overlay
rgba(0, 0, 0, .6)
Sets the color of the overlay, when the Measurement is shown as a modal

Material Dark theme

Variable name Default value Description
$mbsc-material-dark-frame-background
#303030
The Measurement background color
$mbsc-material-dark-frame-text
#c2c2c2
The Measurement text color
$mbsc-material-dark-frame-accent
#81ccc4
The Measurement accent color
$mbsc-material-dark-frame-overlay
rgba(0, 0, 0, .6)
Sets the color of the overlay, when the Measurement is shown as a modal
Indication on what the color variables affect

Mobiscroll theme

Variable name Default value Description
$mbsc-mobiscroll-frame-background
#f7f7f7
The Measurement background color
$mbsc-mobiscroll-frame-text
#454545
The Measurement text color
$mbsc-mobiscroll-frame-accent
#4eccc4
The Measurement accent color
$mbsc-mobiscroll-frame-overlay
rgba(0, 0, 0, .7)
Sets the color of the overlay, when the Measurement is shown as a modal

Mobiscroll Dark theme

Variable name Default value Description
$mbsc-mobiscroll-dark-frame-background
#263238
The Measurement background color
$mbsc-mobiscroll-dark-frame-text
#f7f7f7
The Measurement text color
$mbsc-mobiscroll-dark-frame-accent
#4fccc4
The Measurement accent color
$mbsc-mobiscroll-dark-frame-overlay
rgba(0, 0, 0, .7)
Sets the color of the overlay, when the Measurement is shown as a modal
Indication on what the color variables affect