Titanium.UI.Slider

viewAndroidiPhoneiPadmacOSsince 0.8

A slider component with a draggable thumb.

Android	iOS

A slider lets the user select from a range of values by dragging the slider thumb.

Use the Titanium.UI.createSlider method or <Slider> Alloy element to create a slider.

Android Platform Implementation Notes

On Android, the user can also maniuplate the slider using the arrow keys. For this reason, placing other focusable UI elements to the left or right of the slider is not recommended.

On Android, both min and max must be specified for the slider to work properly.

Earlier versions of the Titanium SDK implicitly enforced that both the leftTrackImage and rightTrackImage properties be specified before the properties would be honored. Beginning with Titanium SDK 4.0.0 this limitation has been removed. However it is recommended that either both or neither be specified.

To style different parts of the Slider you can set these properties in a custom Android theme:

  <item name="android:progressBackgroundTint">#f4511e</item>
  <item name="android:progressTint">#388e3c</item>
  <item name="android:thumbTint">#c51162</item>

You can also use @android:color/transparent to remove the tint.

Examples

Simple Slider

The following sample demonstrates creating a slider and adding a listener to handle the change events.

var slider = Titanium.UI.createSlider({
    top: 50,
    min: 0,
    max: 100,
    width: Ti.UI.FILL,
    value: 50
    });

var label = Ti.UI.createLabel({
    text: slider.value,
    width: Ti.UI.FILL,
    top: 30,
    left: 0,
    textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER
});

slider.addEventListener('change', function(e) {
    label.text = String.format('%3.1f', e.value);
});

Alloy XML Markup

Previous example as an Alloy view.

Implement the updateLabel callback in the controller to update the label value and set the initial text value for the label in the TSS file or controller.

index.xml:

<Alloy>
    <Window id="window" backgroundColor="white">
        <Slider id="slider" top="50" min="0" max="100" width="Ti.UI.FILL" value="50" onChange="updateLabel"/>
        <Label id="label" width="Ti.UI.FILL" top="30" left="0" />
    </Window>
</Alloy>

index.js:

$.slider.text = $.slider.value;
function updateLabel(e) {
    $.label.text = String.format('%3.1f', e.value);
}
$.window.open();

Properties 93

accessibilityDisableLongPress

BooleanAndroidsince 12.4.0

Parameters	Type	Description
name	String	Name of the event.
callback	Callback<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.

Parameters	Type	Description
animation	Titanium.UI.Animation \| Dictionary<Titanium.UI.Animation>	Either a dictionary of animation properties or an Animation object.
callback?	Callback<Object>	Function to be invoked upon completion of the animation.

Parameters	Type	Description
point	Point	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.
destinationView	Titanium.UI.View	View that specifies the destination coordinate system to convert to. If this argument is not a view, an exception will be raised.

Parameters	Type	Description
value	Number	New value for the value property.
options?	AnimatedOptions	Specifies animation options. The only supported property for this dictionary is the `animated` flag, which specifies whether the value change should be animated. `animated` is false by default. Only used on iOS.

Parameters	Type	Description
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.

Event properties	Type	Description
value	Number	New value of the slider.
thumbSize	Size	Dictionary with properties `width` and `height` of the size of the thumb. Available with custom thumb image.
thumbOffset	Point	Dictionary with properties `x` and `y` of the thumb's left-top corner in the control. Available with custom thumb image.
isTrusted	Boolean	True if change was made by the user. False if change was made programmatically.

Event properties	Type	Description
y	Number	Y coordinate of the event from the `source` view's coordinate system.
x	Number	X coordinate of the event from the `source` view's coordinate system.

Event properties	Type	Description
value	Number	Current value of the slider.
bubbles	Boolean	False. This event does not bubble.

Event properties	Type	Description
direction	String	Direction of the swipe--either 'left', 'right', 'up', or 'down'.
x	Number	X coordinate of the event's endpoint from the `source` view's coordinate system.
y	Number	Y coordinate of the event's endpoint from the `source` view's coordinate system.
obscured	Boolean	Returns `true` if the swipe 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.

Examples

Simple Slider

Alloy XML Markup

Properties 93

Linear and Radial Gradients

Methods 14

Events 19