Slider

A slider is a control that the user can drag to change a numerical value within a specified range.

It can be styled with several attributes that change its appearance.

It can be used to send commands or control devices through datapoints.

Slider Command Action

Slider Datapoint Action

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

="mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

The default value is: x0y0.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

Flex Grow

Specifies if the objects should grow to fill the available space.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Objects expand to fill the available space.
false	Objects do not grow to fill the available space.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Objects shrink to fit the available space.
false	Objects do not shrink to fit the available space.

Width

Sets the object's width in pixels.

Minimum value is 1.

Height

Sets the object's height in pixels.

Minimum value is 1.

Action

Action

Specifies the action to be performed when the user moves the slider.

The default value is: none.

Attribute Values

Value	Description
none	Default value. No action.
command	Sends a command.
datapoint	Sets a datapoint.

Name

Specifies the name of the command.

The default value is: =id.

Attribute Values

Value	Description
<string>	Command name.

DMX Address

Specifies the DMX address.

Attribute Values

Value	Description
<string>	DMX address.

Datapoint

Specifies the datapoint.

Attribute Values

Value	Description
<datapoint>	Datapoint.

Value

Value

Specifies the value of the datapoint.

The default value is: 0.

Attribute Values

Value	Description
<string>	Value.

Range

Specifies the range of the slider.

The default value is: 0,100.

Attribute Values

Value	Description
<min,max>	Min, max values.

Unit

Unit displayed on value label, or % for percentage.

Attribute Values

Value	Description
<string>	Displays the unit after the value.
%	Displays the value as percentage. If there's a custom range (different from 0-100) the percentage is calculated.

Change Delay

Defines the time interval between value changes for sending values to the server.

The default value is: 50.

Attribute Values

Value	Description
<number>	Delay in milliseconds.

Inverse

Specifies wether the slider is inverted.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Normal.
true	Inverted.

Layout

Label

Specifies a label for the slider.

Attribute Values

Value	Description
<string>	Label.

Orientation

Specifies the orientation of the slider.

The default value is: horizontal.

Attribute Values

Value	Description
horizontal	Default value. Horizontal.
vertical	Vertical.

Panel

Shows a panel that frames the object. Its style can be modified.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Shows the panel.
false	Hides the panel.

Display Value

Specifies wether the value is displayed.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Hides the value.
true	Shows the value.

Display Pending Value

Specifies wether the pending value is displayed. The pending value is the value that is being sent to the server.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Hides the pending value.
true	Shows the pending value.

Button Layout

Specifies the button layout.

The default value is: none.

Attribute Values

Value	Description
none	Default value. No buttons.
toggle	Toggle button.
both	On/off buttons.

On Value

Specifies a value to be sent when the on button is pressed. If no Off Value is specified, by default it will send on: the server restores the previous on value. If an Off Value is specified, it will send the maximum value of the Range attribute, or 100.

Possible values are from 0 to 100.

Attribute Values

Value	Description
<number>	0-100 value.

Off Value

Specifies the value to be sent when the off button is pressed. It also acts as a threshold to determine the state: any value above it is considered on. If a value is specified, the On Value will default to the maximum value of the range.

The default value is: off.

Attribute Values

Value	Description
<string>	Value.

Handle Size

Specifies the handle size.

The default value is: small.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values

Value	Description	Example
small	Default value. Small size.
medium	Medium size.
large	Large size.
<int>	Custom size in pixels.	30

Style

Panel Color

Specifies the panel color.

The default value is: default.

Attribute Values

Value	Description
default	Default value. Default color.
primary	Primary color, used to highlight important areas.
warning	Warning color, used to highlight warning areas.
success	Success color, used to highlight success areas.
error	Error color, used to highlight error areas.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

Panel Custom Color

Specifies the panel custom color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Handle Color

Specifies the button color.

The default value is: default.

Attribute Values

Value	Description
default	Default value. Default color.
primary	Primary color, used to highlight action buttons.
warning	Warning color, used to highlight warning buttons.
success	Success color, used to highlight success buttons.
error	Error color, used to highlight error buttons.
light	Light color.
dark	Dark color.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

Custom Handle Color

Specifies the handle color.

Attribute Values

Value	Description
<html color>	Any valid HTML color.

Bar Color

Specifies the bar color.

The default value is: default.

Attribute Values

Value	Description
default	Default value. Default color.
primary	Primary color, used to highlight important areas.
warning	Warning color, used to highlight warning areas.
success	Success color, used to highlight success areas.
error	Error color, used to highlight error areas.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

Custom Bar Color

Specifies the bar color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Icon

Icon On

Specifies the icon for the on state.

The default value is: icon:sys#power-on.

Attribute Values

Value	Description
<icon>	Icon.

Icon Off

Specifies the icon for the off state.

The default value is: icon:sys#power-off.

Attribute Values

Value	Description
<icon>	Icon.

Label Typography

Font Family

Specifies the font family.

The default value is: default.

Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

The default value is: 14.

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

Font Color

Specifies the text CSS color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Font Weight

Specifies the weight of the font.

The default value is: normal.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

Italic

Show the text in italics.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

Small Caps

Sets the font to small caps.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Normal.
true	Small caps.

Decoration

Specifies the text decoration.

The default value is: none.

Attribute Values

Value	Description
none	Default value. No decoration.
underline	Underline.
overline	Overline.
line-through	Line through.

Line Height

Sets the line height of the text.

The default value is: 1.0.

Attribute Values

Value	Description
<float>	Specify the line height as a multiple of the font size.

Value Typography

Value Font Family

Specifies the font family.

The default value is: default.

Value Font Size

Specifies the font size in pixels or percentage (relative to the project's font size).

The default value is: 14.

Attribute Values

Value	Description	Example
<integer>	Font size in pixels.
<percentage>%	Relative font size in percentage.	90%

Value Font Color

Specifies the text CSS color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Value Font Weight

Specifies the weight of the font.

The default value is: normal.

Attribute Values

Value	Description
normal	Default value. Normal.
bold	Bold.
bolder	Bolder.
lighter	Lighter.

Value Italic

Show the text in italics.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Normal.
true	Italics.

Value Small Caps

Sets the font to small caps.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Normal.
true	Small caps.

Value Decoration

Specifies the text decoration.

The default value is: none.

Attribute Values

Value	Description
none	Default value. No decoration.
underline	Underline.
overline	Overline.
line-through	Line through.

Value Line Height

Sets the line height of the text.

The default value is: 1.0.

Attribute Values

Value	Description
<float>	Specify the line height as a multiple of the font size.

View

Visible

Sets the object's visibility.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

The default value is: true.

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

Blink

Blinks the object at the specified speed.

The default value is: false.

Attribute Values

Value	Description
false	Default value. Not blinking.
slow	Blinks slowly.
fast	Blinks fast.

Transition

Specifies the transition effect when the object is shown or hidden.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values

Value	Description
none	Default value. No transition.
fade	Fade in/out.
fade-left	Slide from left and fade in/out.
fade-right	Slide from right and fade in/out.
fade-up	Slide from top and fade in/out.
fade-down	Slide from bottom and fade in/out.
slide-left	Slide from left.
slide-right	Slide from right.
slide-up	Slide from top.
slide-down	Slide from bottom.
zoom-in	Zoom in.
zoom-out	Zoom out.
3d-flip-left	3D flip from left.
3d-flip-right	3D flip from right.

Transition Duration

Specifies the transition duration in milliseconds.

The default value is: 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values

Value	Description
<integer>	Duration in milliseconds.

Transition Delay

Specifies the transition delay in milliseconds.

The default value is: 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values

Value	Description
<integer>	Delay in milliseconds.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

The default value is: 1.0.

Attribute Values

Value	Description
0	The object is fully transparent.
>0.0, <1.0	The object is translucent (content behind the element can be seen).
1.0	Default value. The object is fully opaque.

Rotation

Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.

The default value is: 0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values

Value	Description	Example
<int>	Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>	Specify the margin in pixels for each side of the object.	10 20 30 40

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Attribute Values

Value	Description
<float>	Specify the scale for both width and height of the object.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.