Single Slider

Single slider provides a visual indication of adjustable content where the user can increase or decrease the value by moving the handle along a horizontal track.

Usage

When to use

When you want the user to input or select a value in a range. Also the slider label must indicate the value that the slider changes.

Single Slider Configuration

The ?Single Slider? element consists of the following properties:

• UI Configuration
• Event Configuration

UI Configuration

For the “Single Slider” 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	SeekBar 1
Basic	Caption	Specifies the title of the element.	No	Single Slider
Basic	Divisions	This property allows to configure the number sections in the single slider. These sections help the end-user view the value that s/he wants to select. Note: – Unlike the “Range Slider” element, the single slider does not let you select range of values (minimum value and maximum value).	No	5
Basic	Min Value	In this box, enter the minimum value that the slider will display on the horizontal bar.	Yes	1
Basic	Max Value	In this box, enter the maximum value that the slider will display on the horizontal bar.	Yes	50
Basic	Tooltip	This property allows you to configure the tooltip feature as follows: Yes:- Selecting this value activates the tooltip feature for the single slider. No:-Selecting this value deactivates the tooltip feature for the single slider.	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 slider.	No	unmarked
Basic	Labels	Defines a label for several elements.	No	0, 10, 20, 30, 40, 50	when labelled = checked
Basic	Visible	Allows you to define the default visibility of the UI element.	No	marked
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
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	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
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’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left
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, the element will occupy the available space of the parent layout. Manual:-  If you select this option, you can define a specific size 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 ___ and 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 and 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 and 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 slider 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 slider displays.	No	12
UI Properties- Shape & Decoration	Select Color	Click the Color box and then define the color of the range slider when the user places the mouse pointer on the range slider 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 slider when the user does not place the mouse pointer on the range slider.	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 slider. The user moves the thumb to select the value on the range slider.	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 slider.	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 slider when the range slider element is active and the user can use it.	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%
UI Properties- Shape & Decoration	Inactive Color	Click the Color box and then define the color of the range slider when the range slider element is inactive and the user cannot use it.	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 slider 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 Name	Click this list and then select the entity if you want to fetch the values of the range slider from the JSON path of the entity store.	No	–
Data	Entity Path	In this box, click the application tree icon () and then select the JSON path. The range slider will fetch the data from the selected JSON path and then display it to the user.	No	EntityName.

Event Configuration

On the “Single Slider” element, you can configure the following event:

• onSeek