Range Seekbar

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:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rules
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	RangeSeekbar _xxxx
Basic	Caption	Specifies the title of the element.	No	Range Seekbar
Basic	Default Value	This 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.
Basic	Divisions	This property allows to configure the number sections in the range seekbar. These sections help you define the values of the range.	No	5
Basic	Min Value	In this box, enter the minimum value that the range seekbar will display on the horizontal bar.	Yes	0
Basic	Max Value	In this box, enter the maximum value that the range seekbar will display on the horizontal bar.	Yes	0
Basic	Tooltip	This 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.	No	marked
Basic	Labelled	This property allows you to determine whether you want to display label/descriptor of the values on the horizontal bar of the range seekbar.	No	unmarked
Basic	Labels	Defines a label for several elements:	No	0, 10, 20, 30, 40, 50	labels = checked
Basic	Visible	Allows you to define the default visibility of the UI element.	No	marked
Basic	Enable	Allows the user to enable/disable an element. You can decide whether the element needs to be clickable and usable.	No	marked
Basic	Mandatory	Allows you to configure the element as a mandatory element.	No	unmarked
Basic	Message on Failure	This 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.	No	Required	when mandatory = checked
UI Properties	Styles	Allows 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.	No	Default
UI Properties- Alignment & Spacing	Margin	Allows 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.	No	Theme Variable (Margin)
UI Properties- Alignment & Spacing	Element Alignment	Click this list to align the element as follows: –> Right Top –> Bottom Top –> Right Top –> Left Bottom –> Right Bottom –> Left Center	No	Left Top
UI Properties- Caption	Font	Select the font type (For example: – Arial) of the element’s caption.	No	Theme Variable (Font Family)
UI Properties- Caption	Size	Enter the font size of the caption.	No	12
UI Properties- Caption	Color	Select the color of the font of the caption.	No	Theme Variable (Caption)
UI Properties- Caption	Bold	Enter the thickness of the character of the element’s caption in the range of values from 1 to 9.	No	4
UI Properties- Caption	Style	Select the style of font (For example:- Italic) of the caption	No	Normal
UI Properties- Shape & Decoration	Type	Under 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 & Decoration	Width Value	Enter the width of the element in the pixel unit or percentage unit.	No	100%
UI Properties- Shape & Decoration	Height Value	Enter the height of the element in the pixel unit.	No	Set as ___ & Disable
UI Properties- Shape & Decoration	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Show & Disable
UI Properties- Shape & Decoration	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Show & Disable
UI Properties- Shape & Decoration	Track Bar Size	Enter 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.	No	12
UI Properties- Shape & Decoration	Pointer Font Size	In 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.	No	12
UI Properties- Shape & Decoration	Select Color	Click 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.	No	Theme Variable (Primary)
UI Properties- Shape & Decoration	Opacity	Opacity 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.	Yes	100%
UI Properties- Shape & Decoration	Unselect Color	Click 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 & Decoration	Opacity	Opacity 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.	Yes	100%
UI Properties- Shape & Decoration	Thumb Color	Click 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.	No	Theme Variable (Primary)
UI Properties- Shape & Decoration	Opacity	Opacity 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.	Yes	100%
UI Properties- Shape & Decoration	Pointer Color	Click the Color box and then define the color of the pointer of the range seekbar.	No
UI Properties- Shape & Decoration	Opacity	Opacity 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.	Yes	100%
UI Properties- Shape & Decoration	Active Color	Click 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.	No	Theme Variable (Primary)
UI Properties- Shape & Decoration	Opacity	Opacity 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.	Yes	100%
UI Properties- Shape & Decoration	Inactive Color	Click 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 & Decoration	Opacity	Opacity 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.	Yes	100%
UI Properties- Shape & Decoration	Pointer Text Color	Click 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 & Decoration	Opacity	Opacity 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.	Yes	100%
Data	Entity Path	This 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.	No	EntityName.

Event Configuration

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

• onSeek