Single Slider

Single Slider

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 18, 2017 By: Kony Team
41 1 0 6
Sliders has been around for a long time and has become the de facto standard for selecting and filtering in apps. This component helps you achieve that by letting you visually select a value within a larger data set. This components incorporate the latest material design UX principles and cool animations that gives an enhanced User experience for the users.

Devices

 

Platforms

Features

  • Slider with a single handle to select a specific value from given range
  • Easy to achieve the single slider feature without developing it from scratch
  • Ability to define intervals on the slider
  • Facility to customize the UI as you require.

Platforms Supported

  • Android Phone Native
  • iPhone Native

Prerequisites

  • Kony account
  • Kony Visualizer Enterprise
  • A Kony Reference Architecture app created in Kony Visualizer

The Single Slider component contains a slider and a handle. The component allows users to move the handle to select a specific value from a given range. You can use the Single Slider component to control volume, to zoom in and out of an image, and so on.

The Single Slider component is a ready-to-use component. You can import the Single Slider component into your app (created in Kony Visualizer), and achieve the single slider feature without having to develop it from scratch. The Single Slider component also facilitates a set of properties, events, and APIs that helps you customize the UI elements and the functionality.

The following sections help you use the Single Slider component in your app:

Prerequisites

Before you start using the Single Slider component, ensure you have the following:

  1. Kony account
  2. Kony Visualizer Enterprise 7.3
  3. A Kony Reference Architecture app in Visualizer. You can create a Kony Reference Architecture app in Visualizer using the following procedure:
    1. Open Kony Visualizer.
    2. On the File Menu, click New Project. The New Project dialog appears.
    3. In the Project Name box, type a name for your project.
    4. Select Kony Reference Architecture, and click Create.

Importing the Single Slider Component

Before you start importing the component into Kony Visualizer, you must download the component from the Kony Marketplace website. You can import the Marketplace components only into the apps that are of the Kony Reference Architecture type.

To import the Single Slider component, do the following:

  1. Open your app project in Kony Visualizer.
  2. In the Project Explorer, click the context menu arrow of KonyLibrary, and then click Import Library. The Open dialog appears.
  3. Navigate to the location where you downloaded the component (zip file) on your computer, select the component, and click Open. In the Collections library, you will see a new component added.

When you import a component, the component is imported to Visualizer's workspace, but not directly into your app. Thus, after you import a component, you must add the component to your app.

Adding a Single Slider Component to your App

You can add a Single Slider component only to FlexForms.

To import a Single Slider component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. From the Collections tab, drag the component onto the form on the Visualizer canvas. The component is added to the form. You can also see a new element, com.konymp.slider, in the Components section on the Templates tab.
Note:

Ensure that the component is set to occupy 100 percent width of the device. You can achieve this by setting the width of the parent widget to 100 percent.

After adding a component to a form, you can configure the component the way you want it using the Look, Skin, and Action tabs on the Properties pane. Configuring the properties on the Properties pane is similar to configuring the properties of any widget in Kony Visualizer. For more information, refer Button Widget.

You can also see that a new tab, Component, is added on the Properties pane. The Component tab contains assorted properties relevant to the component that allow you to customize the component as required. The properties on the Component tab are categorized as Pass Through and Custom properties. The Pass Through properties are the default properties of individual widgets in the component. The Custom Properties are user-defined properties based on the use case of the component.

Note:

Changes made to the Custom properties are reflected only during run time, but not during design time (Visualizer Canvas).

You can also add a Single Slider component dynamically. To do so,

  1. Open your app project in Kony Visualizer.
  2. In the Project Explorer, on the Projects tab, click the context menu arrow of Modules, and then click New JS module. A new JavaScript file opens in the Code Editor.
  3. Copy and paste the following code snippet in the JavaScript file:
    /* creating a component's Object */var slider = new reusable.component.slider({
                    "clipBounds": true,
                    "height": "15%",
                    "id": "slider",
                    "isVisible": true,
                    "left": "0dp",
                    "top": "0dp",
                    "width": "100%",
                    "zIndex": 1
                }, {}, {});
    
    /* Setting the component's Pass Through and Custom properties */
               slider.minValue = 0;
                slider.maxValue = 100;
                slider.divisions = 5;
                slider.graduations = 10;
                slider.defaultIndex= 5;
    
    /*Adding the Single Slider component to a Form*/
                this.view.add(slider);

    In the code snippet, you can edit the properties of the component as you require. For more information, see Setting Properties.

  4. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Single Slider component. You can set the properties directly on the Component tab or by writing a JavaScript. This section provides information on how to set properties by writing a JavaScript.

Minimum Label
Category: Pass Through
Description: Specifies the minimum value of the slider. The minimum value is the start index of the slider.
Syntax: minValue
Type: Number
Read/Write:

Read + Write

Example:
this.view.singleSliderID.minValue = 0;

Replace the "singleSliderID" with the ID of the component in all examples in this document.
You can find the ID of the component on the Look tab.

Maximum Label
Category: Pass Through
Description: Specifies the maximum value of the slider. The maximum value is the end index of the slider.
Syntax: maxValue
Type: Number
Read/Write:

Read + Write

Example:
this.view.singleSliderID.maxValue= 100;
Display Interval
Category: Custom
Description:

Controls whether or not the interval labels are visible on the slider.

Syntax: intervalDisplay
Type: Boolean
Read/Write:

Write

Remarks: The default value of the property is true.
Example:
this.view.singleSliderID.intervalDisplay = true;
Steps
Category: Custom
Description: Specifies the number of intervals on the slider.
Syntax: graduations
Type: Number
Read/Write:

Read + Write

Remarks:

The default value of the property is zero. Specify the value so that the difference of maximum and minimum values is perfectly divisible (remainder is zero). The value of the property must be greater than the Interval Count property.

The values of interval points on the slider are determined based on the specified minimum and maximum values of the slider. The values are displayed in the pop-up when you move the handle on the slider.

Example:
this.view.singleSliderID.graduations = 10;
Interval Count
Category: Custom
Description: Specifies the number of interval labels to be generated and displayed on the slider.
Syntax: divisions
Type: Constant
Read/Write:

Write

Remarks:

Specify the value so that the difference of maximum and minimum values is perfectly divisible (remainder is zero).

Based on the specified property value and the minimum and maximum values of the slider, the property determines the number of intervals and the values of intervals to be displayed on the slider.

Example:
this.view.singleSliderID.divisions= 5;
Default Selected Value
Category: Custom
Description: Specifies which value on the slider must be selected by default.
Syntax: startIndex
Type: Number
Read/Write:

Write

Remarks:

The value of the property must be greater than or equal to the value of the Minimum Label property.

Example:
this.view.singleSliderID.startIndex = 0;

Defining Events

You can define events to be executed when an action is performed. You can configure the events directly on the Actions tab or by writing a JavaScript. To configure the events on the Actions tab, click Edit against each event. For more information, refer Add Actions.

This section provides details about each event that help you define the actions by writing a JavaScript.

onChangeEnd Event
Category: Custom
Description: The event is invoked when the user-touch is released from the slider.
Syntax:

onChangeEnd(value)

Remarks: The event returns the index value of the slider where the user-touch is released at the time of event is invoked.
onValueChange Event
Category: Custom
Description: The event is invoked when the index is changed from one point to another.
Syntax:

onValueChange(value)

Remarks: The event returns the changed index value.

APIs

The following API pertains to the Single Slider component:

getSelectedValues

The API fetches the selected values.

Syntax
getSelectedValues()
Parameters

None

Return Value

None

Example
var selectedValues= this.view.singleSlider.getSelectedValues();
var index=selectedValues;