Range Seekbar

This post is referring to Vahana 2 (beta version). To check the document for production, please go to vDesigner-v1.0

The “Range Seekbar” element sets a range of the specified units (For example: – 5, 10, etc.) within a given start value and the end value.

Usage

When to use
Use the range seekbar in the mobile apps where the user needs to select the range of values. For instance:- you can use the range seekbar in the e-commerce mobile app where the user wants to buy the products with price value under specific price range. 

Range Seekbar Configuration

On the “Range Seekbar” element, you can perform the following types of configuration:

  • UI Configuration
  • Event Configuration

UI Configuration

For the “Range Seekbar” element, you can configure the following UI properties:

TabProperty NameDescriptionMandatoryNew Default ValueVisibility Rules
BasicReference NameSpecifies a unique name of the element. At the application level, an element is identified and managed by the reference name.YesRangeSeekbar
_xxxx
BasicCaptionSpecifies the title of the element.NoRange Seekbar
BasicDefault ValueThis property allows you to define the default value of an element.

To define the default value:
–> Click in this box, and it displays the list of the pre-define functions, attributes, and element IDs.
–> In the list, select an attribute from which the application will fetch the default value and then display it in the element.
BasicDivisionsThis property allows to configure the number sections in the range seekbar. These sections help you define the values of the range.No5
BasicMin ValueIn this box, enter the minimum value that the range seekbar will display on the horizontal bar.Yes0
BasicMax ValueIn this box, enter the maximum value that the range seekbar will display on the horizontal bar.Yes0
BasicTooltipThis property allows you to configure the tooltip feature as follows:

–> Yes:- Selecting this value activates the tooltip feature for the range seekbar.

–> No:- Selecting this value deactivates the tooltip feature for the range seekbar.
Nomarked
BasicLabelledThis property allows you to determine whether you want to display label/descriptor of the values on the horizontal bar of the range seekbar.Nounmarked
BasicLabelsDefines a label for several elements:No0, 10, 20, 30, 40, 50labels = checked
BasicVisibleAllows you to define the default visibility of the UI element. Nomarked
BasicEnableAllows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.Nomarked
BasicMandatoryAllows you to configure the element as a mandatory element.Nounmarked
BasicMessage on FailureThis property becomes visible when you select Yes under Mandatory. In the Message on Failure box, enter the error message that the application will display if the user does not perform the function on the element.NoRequiredwhen mandatory = checked
UI PropertiesStylesAllows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.NoDefault
UI Properties- Alignment & SpacingMarginAllows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.NoTheme Variable (Margin)
UI Properties- Alignment & SpacingElement AlignmentClick this list to align the element as follows:
–> Right Top
–> Bottom Top
–> Right Top
–> Left Bottom
–> Right Bottom
–> Left Center
NoLeft Top
UI Properties- CaptionFontSelect the font type (For example: – Arial) of the element’s caption.NoTheme Variable (Font Family)
UI Properties- CaptionSizeEnter the font size of the caption.No12
UI Properties- CaptionColorSelect the color of the font of the caption.NoTheme Variable (Caption)
UI Properties- CaptionBoldEnter the thickness of the character of the element’s caption in the range of values from 1 to 9.No4
UI Properties- CaptionStyleSelect the style of font (For example:- Italic) of the captionNoNormal
UI Properties- Shape & DecorationTypeUnder the Shape and Decoration section, this property has the two following options:

Autofill:- If you select this option, you cannot change the element’s dimensions. When you drag the element to the canvas, this option is selected by default.

If you select Auto Fill, vDesigner places the element with the default dimensions.

Manual:- If you select this option, you can change the dimensions of the element.
UI Properties- Shape & DecorationWidth ValueEnter the width of the element in the pixel unit or percentage unit.No100%
UI Properties- Shape & DecorationHeight ValueEnter the height of the element in the pixel unit.NoSet as ___ & Disable
UI Properties- Shape & DecorationXAllows you to move the element along the X-axis; when the value increases, the element moves from left to right.NoShow & Disable
UI Properties- Shape & DecorationYAllows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.NoShow & Disable
UI Properties- Shape & DecorationTrack Bar SizeEnter the size of the track bar. The track bar is the length of the horizontal line on which the thumb nail of the range seekbar moves.No12
UI Properties- Shape & DecorationPointer Font SizeIn this box, enter the value (For example: – 18) that specifies the font size of the text/value that the pointer of the range seekbar displays.No12
UI Properties- Shape & DecorationSelect ColorClick the Color box and then define the color of the range seekbar when the user places the mouse pointer on the range seekbar to select a value.NoTheme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
Yes100%
UI Properties- Shape & DecorationUnselect ColorClick the Color box and then define the color of the range seekbar when the user does not place the mouse pointer on the range seekbar.No#e0e0e0
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
Yes100%
UI Properties- Shape & DecorationThumb ColorClick the Color box and then define the color of the thumb of the range seekbar. The user moves the thumb to select the value on the range seekbar.NoTheme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
Yes100%
UI Properties- Shape & DecorationPointer ColorClick the Color box and then define the color of the pointer of the range seekbar. No
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
Yes100%
UI Properties- Shape & DecorationActive ColorClick the Color box and then define the color of the Range Seekbar element when it is active on the screen. The user can perform the function on the active element.NoTheme Variable (Primary)
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
Yes100%
UI Properties- Shape & DecorationInactive ColorClick the Color box and then define the color of the range seekbar element when it is inactive on the screen. The user cannot perform the function on the inactive element.No#1068eb
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
Yes100%
UI Properties- Shape & DecorationPointer Text ColorClick the Color box and then define the color of the value that the pointer of the range seekbar displays to the user.No#161616
UI Properties- Shape & DecorationOpacityOpacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

While configuring the color, you can also configure the opacity in the percentage unit.
Yes100%
DataEntity PathThis property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module.

To define the entity path:
–> Click in the Entity Path box, and a list expands.
–> The list displays several attributes from the entity.
–> In the list, select an attribute to map it to the element.

After the user performs the function on the element, the application can perform the following functions:
a. Fetches data from the attribute and then displays it in the element.
b. Stores data in the attribute.
NoEntityName.

Event Configuration

For the “Range Seekbar” element, you can configure the following event:

  • onSeek
Was this article helpful?
YesNo