Range Slider

Range Slider

Asset Version: 1.0.0
  • Version 1.0.0
Last Published: Apr 11, 2017 By: Kony Team
193 0 0 30
Sliders are a common mechanism for filtering lists. This component helps you achieve that by letting you visually specify boundaries within a larger data set. The values between the boundaries are the ones that will be picked up the filter. This component will work in a large variety of scenarios. For example, if you want to show flights between $250 and $275 specifically when the cost of flights range from $150 to $500, then, this component will fit in and serve your use case seamlessly.

Requirements

  • Visualizer Enterprise
 

Devices

 

Platforms

Features

  • Slider with a double handle to select a specific range from given range
  • Useful component for filtering lists
  • Ability to define intervals on the slider
  • Easy to achieve the single slider feature without developing it from scratch
  • 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 Range Slider component is a double-handle slider. The component consists of a slider (with minimum value, maximum value, and intervals) and two handles. The two handles on the slider allow users to select a specific range between the minimum and maximum values. For the selected range, you can define and invoke an action that you want to execute.

Here is a use case that describes the use of the Range Slider component.

Use Case

Considering a case that you want to develop an e-commerce app that helps users to purchase consumer products. In this app, you want to develop a feature that helps users to get a list of products within a specific price range. Using the Range Slider component, you can achieve the feature in your app. To achieve the feature, do the following:

  1. Define a Range Slider component that has price labels as intervals on the slider.
  2. Define an event with an action (logic) to list the products that fall under the selected price range.
  3. Invoke the event when a specific price range is selected.

Now, your app with the Range Slider component allows users to select the price range and get a list of products within the specified range.

The Range Slider component is a ready-to-use component. You can import the Range Slider component into your app (created in Kony Visualizer), and achieve the range slider feature without developing it from scratch. The Range 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 Range Slider component in your app:

Prerequisites

Before you start using the Range 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 Range Slider Component

Before you start importing the component to 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 Range Slider component, do the following:

  1. Open your app project in Kony Visualizer.
  2. On the File menu, point to Import, and click Component. 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. The Import Marketplace Item dialog appears.
    rangeslider_import.png
  4. In the Library Name box, type a name if you want to create a new library. Otherwise, you can select the existing library name.
  5. In the Collection Name box, type a name if you want to create a new collection. Otherwise, you can select the existing collection name.
  6. In the Component Name box, the com.konymp.slider name is displayed by default. If you want, you can rename it.

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 Range Slider Component to your App

You can add a Range Slider component only to FlexForms.

To add a Range Slider component, do the following:

  1. Open your app, and then open the form to which you want to add the component.
  2. Open the library to which you imported the component. To open the library:
    • Click the context arrow of KonyLibrary, point to Open, and select the library in which the component exists.
      library.png
  3. 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 Range Slider component dynamically. To do so,

  1. 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.
  2. 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.startIndex= 5;
                slider.endIndex = 80;
    
    /*Adding the Range 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.

  3. Save the file.

Setting Properties

The properties provided on the Component tab allow you to customize the UI elements in the Range 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.rangeSliderID.minValue = 0;

Replace the "rangeSliderID" 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.rangeSliderID.maxValue= 100;
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 indicator when you move the handles on the slider.

Example:
this.view.rangeSliderID.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.rangeSliderID.divisions= 5;
Interval Display
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.rangeSliderID.intervalDisplay = true;
Default Minimum Value
Category: Custom
Description: Specifies which value on the slider must be selected as minimum value 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.rangeSliderID.startIndex = 0;
Default Maximum Value
Category: Custom
Description: Specifies which value on the slider must be selected as maximum value by default.
Syntax: endIndex
Type: Number
Read/Write:

Write

Remarks:

The value of the property must be less than or equal to the value of the Maximum Label property.

Example:
this.view.rangeSliderID.endIndex = 100;

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.

onMinChangeEnd Event
Category Custom
Description: The event is invoked when the user-touch is released from the left handle on the slider.
Syntax:

onMinChangeEnd(value)

Remarks: The event returns an array containing the selected minimum value and the selected maximum value at the time of event is invoked.
onMaxChangeEnd Event
Category Custom
Description: The event is invoked when the user-touch is released from the right handle on the slider.
Syntax:

onMaxChangeEnd(value)

Remarks: The event returns an array containing the selected minimum value and the selected maximum value at the time of event is invoked.
onMinChange Event
Category Custom
Description: The event is invoked when the selected value of the left handle changes while moving the handle on the slider.
Syntax:

onMinChange(value)

Remarks: The event returns an array containing the selected minimum value and the selected maximum value at the time of event is invoked.
onMaxChange Event
Category Custom
Description: The event is invoked when the selected value of the right handle changes while moving the handle on the slider.
Syntax:

onMaxChange()

Remarks: The event returns an array containing the selected minimum value and the selected maximum value at the time of event is invoked.

APIs

The following API pertains to the Range Slider component:

getSelectedValues

The API fetches the selected values.

Syntax
getSelectedValues()
Parameters

None

Return Value

None

Example
var selectedValues= this.view.RangeSlider.getSelectedValues();
var min=selectedValues[0];//value indicated by left handle
var max=selectedValues[1];//value indicated by right handle