Skip to content

sc-slider

go-to-typical-definition

sc-slider-field-Example-1-Image-2

1 Purpose

sc-slider places a slider field on a form, allowing the user to enter a numeric value by moving the slider to the desired value.

The sc-slider definition provides fields for setting the properties of the slider field and is fully described below. These properties include the minimum, maximum and the step size values of the slider.

2 Definition

sc-slider is defined by a set of name/value pair fields consisting of:

  • Required system fields.
  • Required customizable fields.
  • Optional customizable fields.

Note:

  1. Default values for fields described in the tables below are shown in bold text.
  2. A "label" field is ignored if included in the definition as the sc-slider field value is displayed as the field label. The optional "valueLabel" field allows the resulting field label more meaningful.

2.1 Required System Fields

Field Valid Values Description
componentName   sc-slider   The component name.

Example: "componentName": "sc-slider"

2.2 Required Customizable Fields

Field  Valid Values Description
name   Any value written in camel case.   Defines the name of the slider field in the document and database.

Example: "name": "testScSlider"

2.3 Optional Customizable Fields

Field Valid Values  Description
defaultValue   Numeric The value to initially position the slider field at.
The value displays in accordance with the definition fields "step", "format", "min" and "max".

Example:
"defaultValue": 5
Defaults to the "min" field value.
disableSave true Changing the sc-slider field value (i.e. moving the slider to enter or edit a value) does not trigger the Save icon to flash.
Exiting the form without saving changes to the sc-slider field value does not trigger a warning message to display.
In the Angular version of the sc-slider component, clicking the Save icon will not save the sc-slider field value to the document.
In the AngularJS version of the sc-slider component, clicking the Save icon will save the sc-slider field value to the document.

Example:
"disableSave": true
false Default value.
Changing the sc-slider field value (i.e. moving the slider to enter or edit a value) does trigger the Save icon to flash.
Exiting the form without saving changes to the sc-slider field value does trigger a warning message to display.
In both the Angular and AngularJS versions of the sc-slider component, clicking the Save icon will save the sc-slider field value to the document.
enabled false The slider field is greyed out.
A Stop icon appears on mouseover.
A value cannot be entered using the slider field.

Example:
"enabled": false
true Default value.
A value can be entered using the slider field.
fullWidth true The slider field displays full width on the form.

Example:
"fullWidth": true
false Default value.
The slider field does not display full width on the form.
max A numeric The maximum value of the slider.

Example:
"max": 20
100 Default value.
min A numeric The minimum value of the slider.
If this value is exceeded, a warning message is displayed.

*Example:
"min": -20
0 Default value.
precision A numeric The number of digits after the decimal place.

*Example:
"precision": 2
0 Default value.
step A numeric The step size (i.e the amount the value changes by) for each movement of the slider.

*Example:
"step": 2
1 Default value.
valueLabel handlebars formatting string Handlebars defined label that can include the slider value by referencing the "name" field and the values of other fields from the current document by referencing their "name" fields.

Example:
"valueLabel": "Discount % {{testScSlider}}
Current Slider value Default value.
visible false The slider field is not visible on the form.

Example: "visible": false
true Default value.
The slider field is visible on the form.

3 Typical Definition

Below is a typical sc-slider definition, defined with its required fields plus any optional field whose value is typically other than its default value.

        {
            "componentName": "sc-slider",
            "name": "testScSlider",
            "defaultValue": 0,
            "precision": 1,
            "max": 20,
            "min": -20,
            "step": 0.5,
            "valueLabel": "Discount {{testScSlider}} %"
        }

One or more of the optional fields shown below can be included in the above definition should a value other than their default value be required.

            "disableSave": true,
            "enabled": false,
            "fullWidth": true,
            "visible": true

4 Examples

Example 1

sc-slider defined with the typically needed fields.

        {
            "componentName": "sc-slider",
            "name": "testScSlider",
            "precision": 1,
            "max": 20,
            "min": -20,
            "step": 0.25,
            "valueLabel": "Discount {{testScSlider}} %"
        }

Resulting field on the form:

sc-slider-field-Example-1-Image-1

Resulting field on the form after moving the slider to the value 5.3

sc-slider-field-Example-1-Image-2

Resulting field in document and database after saving the selected value:

    "testScSlider": 5.3