sc-slider
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:
- Default values for fields described in the tables below are shown in bold text.
- 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:
Resulting field on the form after moving the slider to the value 5.3
Resulting field in document and database after saving the selected value:
"testScSlider": 5.3