# Titanium.UI.Slider > A slider component with a draggable thumb. - Source: https://titaniumsdk.com/docs/sdk/12.8.0/Titanium.UI.Slider - Titanium SDK version: 12.8.0 - Kind: view - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 0.8 - Extends: Titanium.UI.View - Inheritance: Titanium.UI.View > Titanium.Proxy | Android | iOS | | ------- | --- | | ![Android](./slider_android.png) | ![iOS](./slider_ios.png) | A slider lets the user select from a range of values by dragging the slider thumb. Use the [Titanium.UI.createSlider](https://titaniumsdk.com/docs/sdk/Titanium.UI.md#createSlider) method or **``** 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](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md#leftTrackImage) and [rightTrackImage](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md#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: ``` xml #f4511e #388e3c #c51162 ``` You can also use `@android:color/transparent` to remove the tint. ## Example: Simple Slider The following sample demonstrates creating a slider and adding a listener to handle the change events. ``` js 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); }); ``` ## Example: 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: ``` xml ``` index.js: ``` js $.slider.text = $.slider.value; function updateLabel(e) { $.label.text = String.format('%3.1f', e.value); } $.window.open(); ``` ## Properties ### disabledLeftTrackImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider left track when in the disabled state. ### disabledRightTrackImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider right track when in the disabled state. ### disabledThumbImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider thumb when in the disabled state. ### enabled - Type: Boolean - Platforms: Android, iPhone, iPad, macOS - Default: `Slider is enabled by default (property value may be `undefined`).` Boolean to indicate the enabled state of the slider. ### highlightedLeftTrackImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider left track when in the highlighted state. ### highlightedRightTrackImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider right track when in the highlighted state. ### highlightedThumbImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider thumb when in the highlighted state. ### leftTrackImage - Type: String - Platforms: Android, iPhone, iPad, macOS Image URL of the slider left track. See introduction of the [Titanium.UI.Slider](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md) component for implementation specific information on Android Platform. ### leftTrackLeftCap - Type: Number - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 3.0.0 - Default: `1` Size of the left end cap for the leftTrackImage, disabledLeftTrackImage, highlightedLeftTrackImage and selectedLeftTrackImage properties. This property must be set before the track images are loaded. When specified at creation this property is loaded before loading any of the track images End caps specify the portion of an image that should not be resized when an image is stretched. This technique is used to implement buttons and other resizable image-based interface elements. When an image with end caps is resized, the resizing occurs only in the middle of the image, in the region between the end caps. The end caps themselves keep their original size and appearance. This property specifies the size of the left end cap. ### leftTrackTopCap - Type: Number - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 3.0.0 - Default: `1` Size of the top end cap for the leftTrackImage, disabledLeftTrackImage, highlightedLeftTrackImage and selectedLeftTrackImage properties. This property must be set before the track images are loaded. When specified at creation this property is loaded before loading any of the track images End caps specify the portion of an image that should not be resized when an image is stretched. This technique is used to implement buttons and other resizable image-based interface elements. When an image with end caps is resized, the resizing occurs only in the middle of the image, in the region between the end caps. The end caps themselves keep their original size and appearance. This property specifies the size of the top end cap. ### max - Type: Number - Platforms: Android, iPhone, iPad, macOS - Default: `1. (property value might be undefined)` Maximum value of the slider. Specifies the value of the slider when the thumb is all the way to the right. This value is inclusive. On Android, the selectable values can be limited using the [minRange](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md#minRange) and [maxRange](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md#maxRange) properties. On Android this must be an integer value. ### maxRange - Type: Number - Platforms: Android - Default: `undefined` Upper limit on the slider value that can be selected. If `maxRange` is specified, value of the slider can't be increased above `maxRange`. The total displayed range of the slider is still from `min` to `max`. If `undefined`, the slider can go all the way to `max`. On Android this must be an integer value. ### min - Type: Number - Platforms: Android, iPhone, iPad, macOS - Default: `0. (property value might be undefined)` Minimum value of the slider. Specifies the value of the slider when the thumb is all the way to the left. This value is inclusive. On Android, the selectable values can be limited using the [minRange](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md#minRange) and [maxRange](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md#maxRange) properties. On Android this must be an integer value. ### minRange - Type: Number - Platforms: Android - Default: `undefined` Lower limit on the slider value that can be selected. If `minRange` is specified, value of the slider can't be decreased below `minRange`. The total displayed range of the slider is still from `min` to `max`. If `undefined`, the slider can go all the way to `min`. On Android this must be an integer value. ### rightTrackImage - Type: String - Platforms: Android, iPhone, iPad, macOS Image URL of the slider right track. See introduction of the [Titanium.UI.Slider](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md) component for implementation specific information on Android Platform. ### rightTrackLeftCap - Type: Number - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 3.0.0 - Default: `1` Size of the left end cap for the rightTrackImage, disabledRightTrackImage, highlightedRightTrackImage and selectedRightTrackImage properties. This property must be set before the track images are loaded. When specified at creation this property is loaded before loading any of the track images End caps specify the portion of an image that should not be resized when an image is stretched. This technique is used to implement buttons and other resizable image-based interface elements. When an image with end caps is resized, the resizing occurs only in the middle of the image, in the region between the end caps. The end caps themselves keep their original size and appearance. This property specifies the size of the left end cap. ### rightTrackTopCap - Type: Number - Platforms: iPhone, iPad, macOS - Since: Titanium SDK 3.0.0 - Default: `1` Size of the top end cap for the rightTrackImage, disabledRightTrackImage, highlightedRightTrackImage and selectedRightTrackImage properties. This property must be set before the track images are loaded. When specified at creation this property is loaded before loading any of the track images End caps specify the portion of an image that should not be resized when an image is stretched. This technique is used to implement buttons and other resizable image-based interface elements. When an image with end caps is resized, the resizing occurs only in the middle of the image, in the region between the end caps. The end caps themselves keep their original size and appearance. This property specifies the size of the top end cap. ### selectedLeftTrackImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider left track when in the selected state. ### selectedRightTrackImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider right track when in the selected state. ### selectedThumbImage - Type: String - Platforms: iPhone, iPad, macOS Image URL of the slider thumb when in the selected state. ### splitTrack - Type: Boolean - Platforms: Android - Since: Titanium SDK 6.2.0 - Default: `false` Separates the thumbImage from the slider track. ### thumbImage - Type: String | Titanium.Blob - Platforms: Android, iPhone, iPad, macOS Image for the slider thumb. The thumb image can be specified as a URL. Support for using [Titanium.Blob](https://titaniumsdk.com/docs/sdk/Titanium.Blob.md) for this property is only available on iOS. ### tintColor - Type: String | Titanium.UI.Color - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK iPhone 3.1.3, iPad 3.1.3, Android 8.3.0 The color shown for the portion of the progress bar that is filled. ### trackTintColor - Type: String | Titanium.UI.Color - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 8.3.0 The color shown for the portion of the progress bar that is not filled. ### value - Type: Number - Platforms: Android, iPhone, iPad, macOS Current value of the slider. ## Methods ### setValue - Platforms: iPhone, iPad, macOS Sets the [value](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md#value) property. On iOS, you can specify that the value change should be animated by passing the optional `options` parameter. Parameters: - `value` (Number): New value for the [value](https://titaniumsdk.com/docs/sdk/Titanium.UI.Slider.md#value) property. - `options` (AnimatedOptions, optional): 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. Default: `{ animated: false }`. ## Events ### change - Platforms: Android, iPhone, iPad, macOS Fired when the value of the slider changes. Event properties: - `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. ### click - Platforms: Android Fired when the device detects a click against the view. There is a subtle difference between singletap and click events. A singletap event is generated when the user taps the screen briefly without moving their finger. This gesture will also generate a click event. However, a click event can also be generated when the user touches, moves their finger, and then removes it from the screen. For sliders on Android, the click event is **only** generated by a trackball click on the slider thumb. Event properties: - `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. ### start - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 3.1.0 Fired when the user starts tracking the slider. Event properties: - `value` (Number): Current value of the slider. - `bubbles` (Boolean): False. This event does not bubble. ### stop - Platforms: Android, iPhone, iPad, macOS - Since: Titanium SDK 3.1.0 Fired when the user stops tracking the slider. Event properties: - `value` (Number): Current value of the slider. - `bubbles` (Boolean): False. This event does not bubble. ## Inherited members 96 members are inherited. Each is documented on the type that declares it. - [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/12.8.0/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener` - [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/12.8.0/Titanium.UI.View.md): `accessibilityDisableLongPress`, `accessibilityHidden`, `accessibilityHint`, `accessibilityLabel`, `accessibilityValue`, `anchorPoint`, `animate`, `animatedCenter`, `backgroundColor`, `backgroundDisabledColor`, `backgroundDisabledImage`, `backgroundFocusedColor`, `backgroundFocusedImage`, `backgroundGradient`, `backgroundImage`, `backgroundLeftCap`, `backgroundRepeat`, `backgroundSelectedColor`, `backgroundSelectedImage`, `backgroundTopCap`, `borderColor`, `borderRadius`, `borderWidth`, `bottom`, `center`, `clearMotionEffects`, `clipMode`, `convertPointToView`, `dblclick`, `doubletap`, `elevation`, `filterTouchesWhenObscured`, `focus`, `focusable`, `getViewById`, `hiddenBehavior`, `hide`, `horizontalMotionEffect`, `horizontalWrap`, `id`, `insertAt`, `keepScreenOn`, `keypressed`, `layout`, `left`, `longclick`, `longpress`, `opacity`, `overrideCurrentAnimation`, `postlayout`, `previewContext`, `pullBackgroundColor`, `rect`, `right`, `rotate`, `rotation`, `rotationX`, `rotationY`, `scaleX`, `scaleY`, `show`, `singletap`, `size`, `softKeyboardOnFocus`, `stopAnimation`, `swipe`, `toImage`, `tooltip`, `top`, `touchEnabled`, `touchFeedback`, `touchFeedbackColor`, `touchcancel`, `touchend`, `touchmove`, `touchstart`, `transform`, `transitionName`, `translationX`, `translationY`, `translationZ`, `twofingertap`, `verticalMotionEffect`, `viewShadowColor`, `viewShadowOffset`, `viewShadowRadius`, `visible`, `width`, `zIndex` --- - This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1. - Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.