You are here: Creating a Slider

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:

Widgets are normally added to your Kony application using Kony Visualizer, but can also be added from code. For general information on using widgets in Visualizer, see Designing an Application in the Kony Visualizer User Guide.

For general information on the Slider widget see the Slider topic in the Kony Visualizer User Guide.

The Slider widget capabilities can be broadly categorized into the following:

Layout

Events Description
doLayout Invoked for every widget when the widget position and dimensions are computed.
 
PropertiesDescription
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.
paddingInPixelIndicates if the padding is to be applied in pixels or in percentage.
rightDetermines 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

MethodsDescription
animate Applies an animation to the widget.
 
PropertiesDescription
transformContains an animation transformation that can be used to animate the widget.
widgetSwipeMoveUsed to enable and configure the left or right swipe actions for a widget.
 

Data Management

MethodsDescription

clone

When this method is used on a container widget, then all the widgets inside the container are cloned.
 
PropertiesDescription
enableCacheEnables you to improve the performance of Positional Dimension Animations.

 

3D Touch

MethodsDescription
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

EventsDescription
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.
 
MethodsDescription
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

PropertiesDescription
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

PropertiesDescription
retainContentAlignmentHelps to retain the content alignment of the widget while applying RTL.
retainFlexPositionPropertiesHelps to retain the left, right and padding properties while applying RTL.
retainFlowHorizontalAlignmentEnables you to change the horizontal flow of the widget from left to right.

Miscellaneous

MethodsDescription
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.

 

PropertiesDescription
cursorTypeSpecifies 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

MethodsDescription
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.

 

PropertiesDescription
accessibilityConfig Enables you to control accessibility behavior and alternative text for the widget.
idA unique identifier of Slider consisting of alpha numeric characters.
infoA 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.
parentHelps 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);

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:

Important Considerations

premCopyright © 2012 Kony, Inc. All rights reserved.
premCopyright © 2012 Kony, Inc. All rights reserved.