Slider Widget
A Slider widget allows you to select a value from a defined range of values by moving the thumb (an indicator) in a horizontal direction. The Slider widget consists of a seekbar (or track), and a thumb (a control that you can slide). You can optionally choose to display a minimum value and a maximum value. When you drag the thumb along the slider, the value or process is updated continuously, and is displayed on the track (you must define an event to achieve this behavior).
A Slider widget allows you to select a value from a range of values by moving the thumb (an indicator) in a horizontal direction.
Following are real-time use cases of slider widget:
- Volume and brightness controls: Slider is mainly used in controlling volume and brightness in devices.
- Price Range: You can select the price range using a slider in a shopping application.
- Adjusting zoom levels: Slider widget can be used to adjust the zoom levels of a document, map etc.
- Media Player: Slider widget can also be used as a seek bar in Media player related applications. It can be used to track the progress of the song being played.
Widgets are normally added to your application using Quantum Visualizer, but can also be added from code. For general information on using widgets in Quantum Visualizer, see Designing an Application in the Visualizer User Guide.
For general information on the Slider widget see the Slider topic in the Quantum Visualizer User Guide.
The Slider widget capabilities can be broadly categorized into the following:
- Layout
- Data Management
- Animations
- 3D Touch
- User Input Handling
- UI Appearance
- Enabling RTL
- Miscellaneous
- Configurations Common To All Widgets
Layout
| Events | Description |
|---|---|
| doLayout | Invoked for every widget when the widget position and dimensions are computed. |
| Properties | Description |
|---|---|
| anchorPoint | Specifies the anchor point of the widget bounds rectangle using the widget's coordinate space. |
| bottom | Determines the bottom edge of the widget and is measured from the bottom bounds of the parent container. |
| centerX | Determines the center of a widget measured from the left bounds of the parent container. |
| centerY | Determines the center of a widget measured from the top bounds of the parent container. |
| height | Determines the height of the widget and measured along the y-axis. |
| left | Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container. |
| maxHeight | Specifies the maximum height of the widget and is applicable only when the height property is not specified. |
| maxWidth | Specifies the maximum width of the widget and is applicable only when the width property is not specified. |
| minHeight | Specifies the minimum height of the widget and is applicable only when the height property is not specified. |
| minWidth | Specifies the minimum width of the widget and is applicable only when the width property is not specified. |
| padding | Defines the space between the content of the widget and the widget boundaries. |
| paddingInPixel | Indicates if the padding is to be applied in pixels or in percentage. |
| right | Determines the lower right corner of the widget and is measured from the right bounds of the parent container. |
| thickness | Specifies the thickness of the seekbar. |
| top | Determines the top edge of the widget and measured from the top bounds of the parent container. |
| width | Determines the width of the widget and is measured along the x-axis. |
| zIndex | Specifies the stack order of a widget. |
Animations
| Methods | Description |
|---|---|
| animate | Applies an animation to the widget. |
| Properties | Description |
|---|---|
| transform | Contains an animation transformation that can be used to animate the widget. |
| widgetSwipeMove | Used to enable and configure the left or right swipe actions for a widget. |
Data Management
| Methods | Description |
|---|---|
| When this method is used on a container widget, then all the widgets inside the container are cloned. |
| Properties | Description |
|---|---|
| enableCache | Enables you to improve the performance of Positional Dimension Animations. |
3D Touch
| Methods | Description |
|---|---|
| registerForPeekandPop | Registers a widget to enable 3D Touch peek and pop gestures. |
| setOnPeek | Sets and overrides the existing onPeekCallback for the widget. |
| setOnPop | Overrides the existing onPopCallback for the widget. |
| unregisterForPeekandPop | Unregisters a widget from 3D Touch peek and pop gestures. |
User Input Handling
| Events | Description |
|---|---|
| onScrollWidgetPosition | Invoked by the platform when the widget location position gets changed on scrolling. |
| onSelection | Invoked by the platform when the user makes a selection. |
| onSlide | Invoked by the platform when there is a change in the default selected value. |
| onTouchEnd | Invoked by the platform when the user touch is released from the touch surface. |
| onTouchMove | Invoked by the platform when the touch moves on the touch surface continuously until movement ends. |
| onTouchStart | Invoked by the platform when the user touches the touch surface. |
| Methods | Description |
|---|---|
| removeGestureRecognizer | Allows you to remove the specified gesture recognizer for the specified widget. |
| setGestureRecognizer | Allows you to set a gesture recognizer for a specified gesture for a specified widget. |
UI Appearance
| Properties | Description |
|---|---|
| enableThumbTintColor | Enables you to configure thumbTintColor property. |
| focusThumbImage | Specifies the image to indicate that there is focus on the thumb. |
| leftSkin | Determines the lower left corner edge of the widget and is measured from the left bounds of the parent container. |
| maxLabelSkin | Specifies the text or number to be displayed for the maximum value of the slider. |
| minLabelSkin | Specifies the text or number to be displayed for the minimum value of the slider. |
| orientation | Specifies the orientation of the slider widget. |
| rightSkin | Skin to be applied to the background of the slider on right side of the thumb image. |
| thickness | Specifies the thickness of the seekbar. |
| thumbHeight | Specifies the height of the thumb for the Slider Widget. |
| thumbImage | Specifies the image to indicate the thumb. |
| thumbOffset | If the thumb image is a valid drawable (not null), by default, half of its width is used as the new thumb offset. |
| thumbTintColor | Specifies the color for thumb tint. |
| thumbWidth | Specifies the width of the thumb for the Slider Widget. |
| viewType | Specifies the view type of the Slider widget. |
Enabling RTL
| Properties | Description |
|---|---|
| retainContentAlignment | Helps to retain the content alignment of the widget while applying RTL. |
| retainFlexPositionProperties | Helps to retain the left, right and padding properties while applying RTL. |
| retainFlowHorizontalAlignment | Enables you to change the horizontal flow of the widget from left to right. |
Miscellaneous
| Methods | Description |
|---|---|
| getBadge | Enables you to read the badge value (if any) attached to the specified widget. |
| setBadge | Enables you to set the badge value to the given widget at the upper, right corner of the widget. |
| Properties | Description |
|---|---|
| cursorType | Specifies the type of the mouse pointer used. |
| selectedValue | Specifies the value that must be displayed as selected when rendered. |
| step | Specifies the value by which the slider is increased or decreased between the allowed slider values. |
Configurations Common To All Widgets
| Methods | Description |
|---|---|
| convertPointFromWidget | Allows you to convert the coordinate system from a widget to a point (receiver's coordinate system). |
| convertPointToWidget | Allows you to convert the coordinate system from a point (receiver's coordinate system) to a widget. |
| removeFromParent | Allows you to remove a child widget from a parent widget. |
| setEnabled | Specifies the widget that must be enabled or disabled. |
| setFocus | Specifies the widget on which there must be focus. |
| setVisibility | Use this method to set the visibility of the widget. |
| Properties | Description |
|---|---|
| accessibilityConfig | Enables you to control accessibility behavior and alternative text for the widget. |
| enable | Allows you to make a widget visible but not actionable. |
| id | A unique identifier of Slider consisting of alpha numeric characters. |
| info | A custom JSObject with the key value pairs that a developer can use to store the context with the widget. |
| isVisible | Controls the visibility of a widget on the form. |
| parent | Helps you access the parent of the widget. |
Slider Widget Basics
Creating a Slider Using a Constructor: kony.ui.Slider
var slider = new kony.ui.Slider(basicConf, layoutConf, pspConf);
- basicConf is an object with basic properties.
- layoutConf is an object with layout properties.
- pspConf is an object with platform specific properties.
NOTE: The configuration properties should be passed only in the respective configuration objects otherwise they are ignored
Example
//The following function is the callback function for onSelectCallback event
function onSelectCallBck(slider) {
/*Write your logic here */
}
//Defining the properties for Slider with "onSelectCallback" event
var sliderBasic = {
id: "slider",
info: {
key: "SLIDER"
},
min: 0,
max: 100,
step: 1,
isVisible: true,
leftSkin: "lKin",
rightSkin: "rSkin",
thumbImage: "thumb.png",
focusThumbImage: "fThumb.png",
selectedValue: 50,
onSelection: onSelectCallBck
}
var sliderLayout = {
margin: [5, 5, 5, 5],
marginInPixel: true,
widgetAlignment: constants.WIDGET_ALIGN_CENTER,
containerWeight: 99
};
var sliderPSP = {};
//Creating the Slider.
var slider = new kony.ui.Slider(sliderBasic, sliderLayout, sliderPSP);
//Reading onSelectCallback event of the Slider.
alert("Slider onSelectCallback is ::" + slider.onSelectCallback);Customizing Appearance
You can customize the appearance of the Slider widget using the following platform specific properties:
- leftSkin: Specifies the skin to be applied to the background of the slider on left side of the thumb image of the seekbar.
- rightSkin: Specifies the skin to be applied to the background of the slider on right side of the thumb image of the seekbar.
- minLabel: Specifies the text or number to be displayed for the minimum value of the slider.
- maxLabel: Specifies the text or number to be displayed for the maximum value of the slider.
- thickness: Specifies the thickness of the seekbar.
- minLabelSkin: Specifies the skin for the minLabel property of the slider.
- maxLabelSkin: Specifies the skin for the maxLabel property of the slider.
Important Considerations
- All platforms (except iPhone): The slider widget does not display the minimum and maximum values unless the minLabel and maxLabel are specified.
- iPhone: You cannot display the minimum and maximum values. You can use the minValueImage and the maxValueImage to indicate the values.