MRange

The MobileRange widget is a highly interactive UI widget that allows users to select a range of values from a larger data set.


  • UI Type:

Extends: BaseWidget

Properties

Name Desciption
DisabledThe widget cannot be used.
Display ValueDisplay Widget value.
HiddenHides the widget from the user.
Left IconSet which icon should be displayed to the left of the slider as the decrement button.
Maximum ValueSet the maximum value that can be entered.
Minimum ValueSet the minimum value that can be entered.
Right IconSet which icon should be displayed to the right of the slider as the increment button.
StepSet the how much the number should increase/decrease when a user uses the increment/decrement buttons.
Tab IndexThe Tab Index is an integer that tells the order of the widget when using the tab-key to move from one widget to another.
valueStyle
valueTransform

Style

Name Desciption
Background-colorChange background color of the widget.
Border colorAdd the color for the border.
ColorColor of the text inside the widgets. May not apply to all text inside all widgets.
Font SizeSet the font size in pixels for text.
Icon colorThe color of the icon.
Right left marginGenerate space in the left and right area of the widget.
Text-alignmentSet left, centered or right. Applies both to icon and text.
Top bottom marginGenerate space in the top and bottom area of the widget.
Value background colorsThe background color of the value text box.

Events

Name Description Event Attribute
Blur Event when a widget goes out of focus.
event The event that gets triggered when the user "leaves" an element.
Change Event triggered after the element has finished changing.
event The current value of the range widget.
Click Event that triggers based on touch or click.
event The event that triggered the handler.
DblClick Event that triggers based on double click.
event The event that triggered the handler.
Focus Event when indicating/ highlighting widget using the cursor.
event Focus is the event that gets triggered when a user makes an element come into focus, by clicking on it.
Input Event triggered when value of an widget input is changed.
event The event that triggered the handler.
LeftIconClick Triggered when the left icon is clicked on the element.
event Object containing the item (event.item) and the widget (event.wid) that was clicked.
RightIconClick Triggered when the right icon is clicked on the element.
event Object containing the item (event.item) and the widget (event.wid) that was clicked.

Function

blur ( )

Triggers the blur event.

focus ( )

Triggers the focus event.

get ( name: String ) →{ Object }

Gets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
Returns

The property's value.

getId ( ) →{ ID }

Returns the ID of the widget.

Returns

The ID of the widget

getValue ( ) →{ Object }

Returns the widget's value.

Returns

The widget's value.

hide ( )

Hides the widget.

isEnabled ( ) →{ Boolean }

Returns true if the widget is enabled.

Returns

True if enabled, otherwise false.

isHidden ( ) →{ Boolean }

Returns true if the widget is hidden.

Returns

True if hidden, otherwise false.

set ( name: String , value: Object )

Sets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
value Object The new value.

setEnabled ( Enabled: Boolean )

Enables/disables the widget.

Parameters
Name Type Description
Enabled Boolean True to enable the widget, false to disable.

setStyle ( Object: Object )

Set the widget-style

Parameters
Name Type Description
Object Object properties

setValue ( value: Object )

Sets the widget's value.

Parameters
Name Type Description
value Object The new value.

show ( )

Shows the widget.

Other Widgets