Slider

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

Under Configuration, set or modify the appearance and behavior properties for the view. Under Events, set the formula configuration properties.

Screen size
A configuration property that has the Screen Sizes icon 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.
Theme definitions
Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.

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

Table 1. Appearance configuration properties for the Slider view
Appearance configuration property Description Data type
Vertical The Screen Sizes icon 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 The Screen Sizes icon Specifies the slider height in px (pixels) or em units. If no unit type is specified, px is assumed. String
Width The Screen Sizes icon 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 The Screen Sizes icon 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
Show current value Shows the current slider value, which can be changed by typing a different value. Boolean
Show limit values Shows the minimum and maximum values for the slider range. Boolean
The behavior configuration properties for the Slider view are listed in the following table:
Table 2. Behavior configuration properties for the Slider view
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 UI areas by pressing the Tab key. Integer

Events

Set or modify the formula configuration properties and the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information on how to define and code events, see User-defined events.
The formula configuration properties for the Slider view are shown in the following table:
Table 3. Formula configuration properties for the Slider view
Formula configuration property Description Data type
Value formula Specifies the formula or expression to use when the slider values are automatically calculated for the view. No formula is specified by default.

For more information about formulas, see Formulas.

String
The Slider view has the following types of event handlers:
  • On load: Activated when the view 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 view, see the Slider JavaScript API.

Additional resources

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