Slider

Overview

Add a slider to the view.

Component Properties

Dimensions — The placement on the canvas (X and Y) and the size (width and height) of the component.

To move a component freely, the View Property tab must have the Free Positioning option checked.

Data

Minimum Value — Set the slider’s minimum value.

Maximum Value — Set the slider’s maximum value.

On Value Change — Select event when the slider’s value changes.

On Sliding Complete — Select event when the user releases the slider.

Value Step — Set the value for each step of the slider. For instance a value of 1 on a slider with 10 as the maximum value will result in 10 steps.

On Press — Select event when the slider is pressed, short.

On Long Press — Select event when the slider is pressed, long.

On Press In — Select event when the slider is pressed in.

On Press Out — Select event when the slider is released.

On Focus — Select event when the slider gets focus.

On Blur — Select event when the slider loses focus

Hide Component — The slider can be hidden by applying a rule on a certain event.

Output

Value — Select a value to be sent to output, configured under the View Properties tab.

Accessibility

Accessibility Label — Interface Accessibility label.

Accessibility Hint — Interface Accessibility hint.

Accessibility Role — Select an accessibility role, a function, for the component, to support disabled users.

Styling

Override — Override the currently selected style.

Min Track Color — Selects the color to the right of the slider’s handle.

Max Track Color — Selects the color to the left of the slider’s handle.

Thumb Color — Selects the color of the slider’s handle.

Background Color — Sets the background color of the component.

Background Image — Select an image as the component’s background.

Background Size — Select if the image should cover the component’s background, be centered, repeated or stretched.

Component Width — The width of the component inside the container (the component’s borders).

Component Height — The height of the component inside the container (the component’s borders)

Flex Direction — Select the main axis where flex items will be placed, for instance horizontal or vertical (along a row or in a column).

Justify Content — Select how flex items will be placed in relation to each other, for instance towards the start of the flex direction, or with space between.

Align Content — Select how flex items will be placed in relation to the components border.

Align Items — Select how flex items will be placed in relation to the flex direction.

Border Top Color — The color of the component’s top border.

Border Top Width — The width of the component’s top border.

Border Bottom Color — The color of the component’s bottom border.

Border Bottom Width — The width of the component’s bottom border.

Border Left Color — The color of the component’s left border.

Border Left Width — The width of the component’s left border.

Border Right Color — The color of the component’s right border.

Border Right Width — The width of the component’s right border.

Border Top Left Radius — Sets the rounding of the top left corner.

Border Bottom Left Radius — Sets the rounding of the bottom left corner.

Border Top Right Radius — Sets the rounding of the top right corner.

Border Bottom Right Radius — Sets the rounding of the bottom right corner.

Border Radius (All) — Sets the rounding of all corners.

Border Style — Sets the style, solid, dotted or dashed, of the component’s border.

Shadow — Adds a shadow to the component’s borders.

Opacity — Sets the opacity of the component.

Component Padding — Sets the padding, top, bottom, left, right of the component inside the container (the component’s borders).

Component Container Padding — Sets the padding, top, bottom, left, right of the component container (the component’s borders).