Skip to content
Titanium SDK
Version12.6.2

You are reading 12.6.2. See this page in 13.4.1.

Titanium.UI.iOS.Stepper

viewiPhoneiPadmacOSsince iPhone 5.4.0, iPad 5.4.0, macOS 9.2.0

Extends Titanium.UI.ViewTitanium.Proxy

A widget used to increment and decrement a value.

Default Custom
Stepper Custom

A Stepper displays its selected state while it is being pressed. You can specify background images for each state on iOS. Use the Titanium.UI.iOS.createStepper method or a <Stepper> Alloy element to create a stepper (see the "Examples" section details).

  • When assigning a custom image to the backgroundImage property, the image must be partially or wholly transparent for the background color or background gradient to be visible.

  • Similarly, for an assigned background gradient to show through, the backgroundColor may need to be set to 'transparent'.

  • Note that the stepper cannot be re-sized.

Examples

Simple Stepper Example

var win = Ti.UI.createWindow({
    backgroundColor: '#fff'
});

var stepper = Ti.UI.iOS.createStepper({
    tintColor: "green",
    steps: 3,
    maximum: 30,
    minimum: 0
});

stepper.addEventListener("change", function(e) {
    Ti.API.info(e.value);
});

win.add(stepper);
win.open();

Alloy XML Markup

Previous example as an Alloy view.

stepper.xml:

<Alloy>
    <Window id="window">
        <Stepper id="stepper" onClick="doClick" tintColor="green" steps="3" />
    </Window>
</Alloy>

stepper.js:

function doClick(e) {
    alert(e.value);
}

$.window.open();

Properties 57

apiName

Stringsince Android 3.2.0, iPhone 3.2.0, iPad 3.2.0, macOS 9.2.0read-only

Inherited from Titanium.Proxy

The name of the API that this proxy corresponds to.

autorepeat

Boolean

If YES, the user pressing and holding on the stepper repeatedly alters value. The default value is YES.

Inherited from Titanium.UI.View

A background gradient for the view.

Linear and Radial Gradients

The following code excerpt creates two views, one with a linear gradient and one with a radial gradient.

var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff',
    layout: 'vertical'
});

var radialGradient = Ti.UI.createView({
    top: 10,
    width: 100,
    height: 100,
    backgroundGradient: {
        type: 'radial',
        startPoint: { x: 50, y: 50 },
        endPoint: { x: 50, y: 50 },
        colors: [ 'red', 'blue'],
        startRadius: 50,
        endRadius: 0,
        backfillStart: true
    }
});
var linearGradient = Ti.UI.createView({
    top: 10,
    width: 100,
    height: 100,
    backgroundGradient: {
        type: 'linear',
        startPoint: { x: '0%', y: '50%' },
        endPoint: { x: '100%', y: '50%' },
        colors: [ { color: 'red', offset: 0.0}, { color: 'blue', offset: 0.25 }, { color: 'red', offset: 1.0 } ],
    }
});
win1.add(radialGradient);
win1.add(linearGradient);
win1.open();

Background image for the stepper in its normal state, specified as a local file path or URL.

Also sets the background image for other stepper states (focused, selected), unless they've been specified explicitly. On iOS, if backgroundDisabledImage is unset, the image will appear faded to indicate being disabled. Also on iOS, if backgroundSelectedImage is unset, the image will be darkened to indicate being selected.

borderRadius

Number | String | Array<Number> | Array<String>

Inherited from Titanium.UI.View

Radius for the rounded corners of the view's border.

Default: 0

bubbleParent

Booleansince Android 3.0.0, iPhone 3.0.0, iPad 3.0.0, macOS 9.2.0

Inherited from Titanium.Proxy

Indicates if the proxy will bubble an event to its parent.

Default: true

continuous

Boolean

If YES, value change events are sent immediately when the value changes during user interaction. If NO, a value change event is sent when user interaction ends. The default value is YES.

Background image for the stepper decrement button in its disabled state, specified as a local file path or URL. The decrement button enters a disabled state ones the value is equal to the minimumValue , setting the enabled property to false will have no effect to decrement button state.

Background image for the stepper decrement button in its normal state, specified as a local file path or URL.

Also sets the background image for the other stepper states (disabled, focused, selected), unless they've been specified explicitly, except for iOS, which requires a backgroundImage.

enabled

Boolean

Determines if the stepper is enabled or disabled.

Background image for the stepper increment button in its disabled state, specified as a local file path or URL.The increment button enters a disabled state ones the value is equal to the maximumValue , setting the enabled property to false will have no effect to increment button state.

Background image for the stepper increment button in its normal state, specified as a local file path or URL.

Also sets the background image for the other stepper states (disabled, focused, selected), unless they've been specified explicitly, except for iOS, which requires a backgroundImage.

layout

String

Inherited from Titanium.UI.View

Specifies how the view positions its children. One of: 'composite', 'vertical', or 'horizontal'.

left

Number | String

Inherited from Titanium.UI.View

View's left position, in platform-specific units.

maximum

Number

The maximum value the stepper will be set to, the value must be greater than the minimum value. If you attempt to set a value equal to or lower than minimum, the system will default the value to 100.

minimum

Number

The minimum value the stepper will be set to, the value must be smaller than the maximum value. If you attempt to set a value equal to or greater than maximum, the system will default the value to 0.

opacity

Number

Inherited from Titanium.UI.View

Opacity of this view, from 0.0 (transparent) to 1.0 (opaque). Defaults to 1.0 (opaque).

rect

DimensionWithAbsolutessince 2.0.0read-only

Inherited from Titanium.UI.View

The bounding box of the view relative to its parent, in system units.

rotation

NumberiPhoneiPadsince Android 5.4.0, iPhone 12.3.0, iPad 12.3.0

Inherited from Titanium.UI.View

Clockwise 2D rotation of the view in degrees.

steps

Number

The value the stepper will increment and decrement by, default value for this property is 1. When setting a new value, it must be greater than 1.

Sets the color for the widget, any backgroundImages added will be set to the same color.

For information about color values, see the "Colors" section of Titanium.UI.

tooltip

Stringsince 12.1.0iOS 15.0+

Inherited from Titanium.UI.View

The default text to display in the control's tooltip.

value

Number

The current value of the stepper.

Methods 12

Inherited from Titanium.Proxy

Adds the specified callback as an event listener for the named event.

Parameters
ParametersTypeDescription
nameString

Name of the event.

callbackCallback<Titanium.Event>

Callback function to invoke when the event is fired.

4 fields
bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

source Object

Source object that fired the event.

type String

Name of the event fired.

convertPointToView

since Android 1.8, iPhone 1.8, iPad 1.8, macOS 9.2.0

Inherited from Titanium.UI.View

Translates a point from this view's coordinate system to another view's coordinate system.

Parameters
ParametersTypeDescription
pointPoint

A point in this view's coordinate system.

If this argument is missing an x or y property, or the properties can not be converted into numbers, an exception will be raised.

destinationViewTitanium.UI.View

View that specifies the destination coordinate system to convert to. If this argument is not a view, an exception will be raised.

Returns Point

Inherited from Titanium.Proxy

Fires a synthesized event to any registered listeners.

Parameters
ParametersTypeDescription
nameString

Name of the event.

event?Dictionary

A dictionary of keys and values to add to the Titanium.Event object sent to the listeners.

getViewById

since 6.1.0

Inherited from Titanium.UI.View

Returns the matching view of a given view ID.

Parameters
ParametersTypeDescription
idString

The ID of the view that should be returned. Use the id property in your views to enable it for indexing in this method.

Inherited from Titanium.UI.View

Hides this view.

Parameters
ParametersTypeDescription
options?AnimatedOptions

Animation options for Android only. Since SDK 5.1.0 and used only on Android 5.0+

Determines whether to enable a circular reveal animation. Note that the default here is equivalent to passing in { animated: false }

insertAt

since 3.3.0

Inherited from Titanium.UI.View

Inserts a view at the specified position in the children array.

Parameters
ParametersTypeDescription
paramsViewPositionOptions

Pass an object that specifies the view to insert and optionally at which position (defaults to end)

2 fields
position? Number

Position in the children array of the view element to replace.

view Titanium.UI.View

View to insert. Required.

Inherited from Titanium.Proxy

Removes the specified callback as an event listener for the named event.

Parameters
ParametersTypeDescription
nameString

Name of the event.

callbackCallback<Titanium.Event>

Callback function to remove. Must be the same function passed to addEventListener.

4 fields
bubbles Boolean

True if the event will try to bubble up if possible.

cancelBubble Boolean

Set to true to stop the event from bubbling.

source Object

Source object that fired the event.

type String

Name of the event fired.

Inherited from Titanium.UI.View

Makes this view visible.

Parameters
ParametersTypeDescription
options?AnimatedOptions

Animation options for Android only. Since SDK 5.1.0 and only used on Android 5.0+

Determines whether to enable a circular reveal animation. Note that the default here is equivalent to passing in { animated: false }

Inherited from Titanium.UI.View

Returns an image of the rendered view, as a Blob.

Parameters
ParametersTypeDescription
callback?Callback<Titanium.Blob>

Function to be invoked upon completion. If non-null, this method will be performed asynchronously. If null, it will be performed immediately.

honorScaleFactor?Boolean

Determines whether the image is scaled based on scale factor of main screen. (iOS only)

When set to true, image is scale factor is honored. When set to false, the image in the blob has the same dimensions for retina and non-retina devices.

Events 7

Fired every time the stepper value changes.

Event properties
Event propertiesTypeDescription
valueNumber

The current value of the stepper.

minimumNumber

The minimum value of the stepper.

maximumNumber

The maximum value of the stepper.

Inherited from Titanium.UI.View

Fired when the device detects a click against the view.

Event properties
Event propertiesTypeDescription
xNumber

X coordinate of the event from the source view's coordinate system.

yNumber

Y coordinate of the event from the source view's coordinate system.

obscuredBoolean

Returns true if the click passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Inherited from Titanium.UI.View

Fired when the device detects a double click against the view.

Event properties
Event propertiesTypeDescription
xNumber

X coordinate of the event from the source view's coordinate system.

yNumber

Y coordinate of the event from the source view's coordinate system.

obscuredBoolean

Returns true if the double click passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Inherited from Titanium.UI.View

Fired when a touch event is interrupted by the device.

Event properties
Event propertiesTypeDescription
xNumber

X coordinate of the event from the source view's coordinate system.

yNumber

Y coordinate of the event from the source view's coordinate system.

forceNumber

The current force value of the touch event. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later and on some Android devices.

sizeNumber

The current size of the touch area. Note: This property is only available on some Android devices.

maximumPossibleForceNumber

Maximum possible value of the force property. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.

altitudeAngleNumber

A value which indicates the stylus angle on the screen. If the stylus is perpendicular to the screen or no stylus is being used, the value will be Pi/2. If the stylus is parallel to the screen, the value will be 0. Note: This property is only available for iOS devices that support 3D-Touch and are 9.1 or later.

timestampNumber

The time (in seconds) when the touch was used in correlation with the system start up. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.

azimuthUnitVectorInViewXNumber

The x value of the unit vector that points in the direction of the azimuth of the stylus. Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.

azimuthUnitVectorInViewYNumber

The y value of the unit vector that points in the direction of the azimuth of the stylus. Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.

obscuredBoolean

Returns true if the touch passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Inherited from Titanium.UI.View

Fired when a touch event is completed.

Event properties
Event propertiesTypeDescription
xNumber

X coordinate of the event from the source view's coordinate system.

yNumber

Y coordinate of the event from the source view's coordinate system.

forceNumber

The current force value of the touch event. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later and on some Android devices.

sizeNumber

The current size of the touch area. Note: This property is only available on some Android devices.

maximumPossibleForceNumber

Maximum possible value of the force property. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.

altitudeAngleNumber

A value which indicates the stylus angle on the screen. If the stylus is perpendicular to the screen or no stylus is being used, the value will be Pi/2. If the stylus is parallel to the screen, the value will be 0. Note: This property is only available for iOS devices that support 3D-Touch and are 9.1 or later.

timestampNumber

The time (in seconds) when the touch was used in correlation with the system start up. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.

azimuthUnitVectorInViewXNumber

The x value of the unit vector that points in the direction of the azimuth of the stylus. Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.

azimuthUnitVectorInViewYNumber

The y value of the unit vector that points in the direction of the azimuth of the stylus. Note: This property is only available for iOS devices that support the Apple Penciland are 9.1 or later.

obscuredBoolean

Returns true if the touch passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Inherited from Titanium.UI.View

Fired as soon as the device detects movement of a touch.

Event properties
Event propertiesTypeDescription
xNumber

X coordinate of the event from the source view's coordinate system.

yNumber

Y coordinate of the event from the source view's coordinate system.

forceNumber

The current force value of the touch event. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later and on some Android devices.

sizeNumber

The current size of the touch area. Note: This property is only available on some Android devices.

maximumPossibleForceNumber

Maximum possible value of the force property. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.

altitudeAngleNumber

A value which indicates the stylus angle on the screen. If the stylus is perpendicular to the screen or no stylus is being used, the value will be Pi/2. If the stylus is parallel to the screen, the value will be 0. Note: This property is only available for iOS devices that support 3D-Touch and are 9.1 or later.

timestampNumber

The time (in seconds) when the touch was used in correlation with the system start up. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.

azimuthUnitVectorInViewXNumber

The x value of the unit vector that points in the direction of the azimuth of the stylus. Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.

azimuthUnitVectorInViewYNumber

The y value of the unit vector that points in the direction of the azimuth of the stylus. Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.

obscuredBoolean

Returns true if the touch passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.

Inherited from Titanium.UI.View

Fired as soon as the device detects a touch gesture.

Event properties
Event propertiesTypeDescription
xNumber

X coordinate of the event from the source view's coordinate system.

yNumber

Y coordinate of the event from the source view's coordinate system.

forceNumber

The current force value of the touch event. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later and on some Android devices.

sizeNumber

The current size of the touch area. Note: This property is only available on some Android devices.

maximumPossibleForceNumber

Maximum possible value of the force property. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.

altitudeAngleNumber

A value which indicates the stylus angle on the screen. If the stylus is perpendicular to the screen or no stylus is being used, the value will be Pi/2. If the stylus is parallel to the screen, the value will be 0. Note: This property is only available for iOS devices that support 3D-Touch and are 9.1 or later.

timestampNumber

The time (in seconds) when the touch was used in correlation with the system start up. Note: This property is only available for iOS devices that support 3D-Touch and run 9.0 or later.

azimuthUnitVectorInViewXNumber

The x value of the unit vector that points in the direction of the azimuth of the stylus. Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.

azimuthUnitVectorInViewYNumber

The y value of the unit vector that points in the direction of the azimuth of the stylus. Note: This property is only available for iOS devices that support the Apple Pencil and are 9.1 or later.

obscuredBoolean

Returns true if the touch passed through an overlapping window belonging to another app.

This is a security feature to protect an app from "tapjacking", where a malicious app can use a system overlay to intercept touch events in your app or to trick the end-user to tap on UI in your app intended for the overlay.