Slider

   MaestroThe UI design product.  |   Form Builder |   21.05 This feature was updated in 21.05.

Maestro comes with the Slider component (widget) that allows users to view and select a value or range of values from the range along a bar.

This component supports both left-to-right (LTR) and right-to-left (RTL) languages. For LTR languages, the smallest value appears on the far left end of the track and the largest value is on the far right. For RTL languages this orientation is reversed.

Usage

  1. Open the Palette pane in the Maestro Editor.
  2. Locate the Slider component within the Input Fields folder.
  3. Drag the component into the View pane or the Wireframe.
  4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to the Slider component:

Configuration

Min Value
Integer
minValue

The minimum value of the slider.

Max Value
Integer
maxValue

The maximum value of the slider.

Step Value
Integer
step

The interval of the slider's value increment.

Show Ticks
Boolean
showTicks

Shows tick marks at predetermined values, without their actual values, that the user can move the slider to. The predetermined values are calculated usingStep Value.

Show Ticks With Values
Boolean
showTicksValues

Shows tick marks with their predetermined values that the user can move the slider to. The predetermined values are calculated using Step Value.

Value Prefix
Text
valuePrefix

Adds this text to the value label as a prefix.

Note

This value can be translated to different languages including right-to-left languages.  |  21.05 This feature was introduced in 21.05.

Value Suffix
Text
valueSuffix

Adds this text to the value label as a suffix.

Note

This value can be translated to different languages including right-to-left languages.  |  21.05 This feature was introduced in 21.05.

Add Space Between
Boolean
addSpaceBetween

Adds a space between the prefix and the value label, and between the suffix and the value label.

Range Slider

Enable Range Slider
Boolean
isRange

Shows the second thumb to allow the user to view and specify the range of values.

Min Range
Integer
minRange

The minimum value of the range slider.

Max Range
Integer
maxRange

The maximum value of the range slider.

Help Text

Popover Help Text
Help Text
helpText

Shows a popover help text to provide some contextual help to the user. You can use the Maestro rich text editor to create the help text using various formatting and styles.

Next, learn about the Topics component.