Slider control

This control creates a slider with a handle that you can drag to increase or decrease a number. You can choose the number from a range of numbers, and specify the step value by which the slider increases or decreases the number when you slide the handle.

Configuration properties

Set or modify configuration properties for the control, such as appearance and behavior properties, in the Configuration properties tab. Set the formula configuration properties in the Events tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor, you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Slider control are shown in the following table:

Table 1. Appearance configuration properties for the Slider control
Appearance configuration property	Description	Data type
Vertical	When selected, it displays the slider vertically rather than horizontally.	`Boolean`
Color style	Specifies a color style for the slider. The colors correspond to variables in the specified theme.	`String`
Height	Specifies the slider height in `px` (pixels) or `em` units. If no unit type is specified, `px` is assumed.	`String`
Width	Specifies the width of the slider in pixels, percent, or em units. For example: `50px` or `20%` or `0.4em`. If no unit type is specified, `px` is assumed.	`String`
Border radius	Specifies the radius of the curvature for the corners of the slider bar.	`String`
Handle width	Specifies the width of the handle in pixels (`px`) or `em` units. For example: `50px` or `0.4em`. If no unit is specified, `px` is assumed (`%` should be avoided).	`String`
Handle radius	Specifies the radius of the curvature for the corners of the handle.	`String`

The behavior configuration properties for the Slider control are listed in the following table:

Table 2. Behavior configuration properties for the Slider control
Behavior configuration property	Description	Data type
Minimum	Specifies the minimum value in the slider range.	`Decimal`
Maximum	Specifies the maximum value in the slider range.	`Decimal`
Step	Specifies the step value for the slider.	`Decimal`
Tab index	Specifies the tabbing sequence index of the form control. The tab indices start at 1 and can be set sparsely. For example, you can use 1, 5, 10. The Tab index property controls the tabbing sequence when you move between coach areas by pressing the Tab key.	`Integer`

Events

Set or modify the formula configuration properties and the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information on how to define and code events, see User-defined events.

The formula configuration properties for the Slider control are shown in the following table:

Table 3. Formula configuration properties for the Slider control
Formula configuration property	Description	Data type
Value formula	Specifies the formula or expression to use when the slider values are automatically calculated for the control. No formula is specified by default.	`String`

The Slider control has the following types of event handlers:

On load: Activated when the control loads. For example:
```
me.setValue(50)
```

On change: Activated when the slider value is changed. For example:

if (newVal > 50) {${icon}.setIcon("smile-o");} else {${icon}.setIcon("frown-o");}

Methods

For detailed information on the available methods for the Slider control, see the JavaScript documentation.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.