Step Slider

Overview

The step sliders allow people to use a slider to select a number from a range of values

No Code set up options using the side panel

Example of the No Code set up side panel

No Code side panel

General

Property	Description
Title	Name of the component.
Range Min	Number used as the minimum value of the slider.
Range Max	Number used as the maximum value of the slider.
Increment By	The increment which the slider changes values by. Note that the increment value must be divisible by the range.

Advanced Editor set up options

Properties shared between components

Property	What does the property do (in plain english)	Possible values	How to find these values (in plain english)
`label`	The title or label to be displayed	“My Component”
`dataPath`	The data path where to save the value. ex.: “$.hello.world” would result to: `{ hello: { world: [] } }`	“$.task.section.myComponent”	A string that starts with `$` for the root, and each step is separated by a dot `.`. A step is a string without any space.
`isRequired`	A flag if component is required to be filled before complete	true
`isReadOnly`	A flag if component is read-only or not editable	false
`isHidden`	A flag if component is hidden	false
`condition`	Hides component if condition not met	"’{$.order.product[0].qty}’ > 10000” or ”’{$.task.section.componentName}’ == ‘value’”	Can either be <, >, or == A calculation expression that can use arithmetic operators, but this time, prefix `=` is not necessary
`onChange`	url to be called when component value changed	`"/api/v3/flow/execute/activity/{$.id}?refreshLayout=true"`	Use the exact value in the example here. Any Diana API url path in swagger that are `GET` methods. a variable can be used by wrapping it with `{}` in the example case it has `{$.id}` it resolves to the id of work
`width`	The with size of component	“col-1” “col-2” “col-3” “col-4” “col-5” “col-6” “col-7” “col-8” “col-9” “col-10” “col-11” “col-12”	A string that starts with “col-” followed by a number from 1 to 12. e.g. 12 means it takes up 100% of the horizontal space, and 6 means it takes up half the horizontal space, etc)
`defaultValue`	The default value of the component	“$.something.otherComponent” ”Hello World” ”={$.num1}+{$.num2}”	- Can be a literal string value like for text input component. For example, putting “Hello World”, will make it as default value of the text input - Can be a data path from other components, with this setup it will copy the value of other component. - Can be a calculation using arithmetic operators. The data path of other components like number input can be used as variable, but they need to be wrapped by `{}` for example, to add 10 to the value of a data path, it would be `={$.num1}+10`. to activate calculation, it should start with `=` - Can be any math.js function. See https://mathjs.org/ for a list of functions
`validation`	A list of validation rules	`[ { "type": "error", "message": "This field is required", "rules": "required", "alwaysTrigger": false } ]`	See the “Validation property set up” drop down below this table
`dataKey`	To which the value of datapath will be resolved.	“data” ”layoutComponent"	“data” - means the data path will be resolved from `work.data` ”layoutComponent” - means the data path will be resolved from the layout component config. Ex. `$.properties.label` will result to the label of component
`defaultValueDataKey`	Same with `DataKey`, but this time it’s for the default value of component	“data” ”layoutComponent"	Check `DataKey` above
`recalculateDefaultValueWhenDataPathChange`	recalculates component value using `defaultData` whenever a value changed in the list	`[ "={$.num1}+{$.num2}" ]`	The values can either be a data path or calculation, like the values that being set in default value
`sidePanelShowHide`	Sometimes a work is being rendered in a side panel, but this is mostly common for the assets. This serves as a flag if the component should be shown in case work or asset is rendered in side panel	`false`
`name`	A unique name that is used by the backend; Not displayed in component but it needs to have a value and must be unique	“my-component”
`description`	Description for the component

‣

Validation property set up

Properties unique to this component

All of these unique properties sit within a “properties” object e.g.

{
	"property one shared between components": "",
	"property two shared between components": "",
	"property etc shared between components": "",
	"properties": {
		"Tooltip": "",
		"Placeholder": "",
		"etc": "",
	}
}

Property	What does the property do (in plain english)	Possible values	How to find these values (in plain english)
`tooltip`	tool tip is a small icon that shows up at the top of the component name, tooltip can be hovered and you can put hints or guidelines for users for the specific component that uses the tool tip.	tooltip = “tooltip can be hovered to display a sentence or paragraph descriptive of the specific usage of a component”	Create a helpful sentence or short paragraph explaining the component's use. This text will appear when users hover over the tooltip icon.
`marks`	Determines the increments or steps within the range that divide the maximum value evenly without a remainder.	An integer value, e.g., 1,2,5, 10	Identify a number that divides your maximum range value evenly. This is used to create ticks or steps in a slider or range input.
`minValue`	Sets the minimum value that can be selected or entered for the component.	An integer value, e.g., 0, 1, 10	Determine the smallest acceptable value for the component. This is the starting point or lower limit of the range.
`maxValue`	Sets the maximum value that can be selected or entered for the component.	An integer value, e.g., 10, 100, 1000	Decide on the largest acceptable value for the component. This represents the upper limit of the range.
`labels`	Holds the properties below	[{}, {}, {}]
`labels` `- range`	Defines the range of values that the component can accept, typically in the form of an array with a minimum and maximum value.	An integer array, e.g., `[0, 20]`, `[20, 40], [40, 60], [60, 80]` `[80, 100]`	Decide on the minimum and maximum values that the component should support. These values will be stored in an array representing the range.
`labels - label`	Provides a text label for the slider progression in the range. this text changes along with the range.	string value i.e. “label” : “New” , “label” : “Minimal Wear”	Decide on a clear and descriptive name for the slider progression.
`labels - color`	Specifies the primary color used for the component. This affects the slider itself and the label text color.	A string value representing a colour code, e.g., `"#FF5733"` , `"#FFc7e3"` ,`"#FFdde3"`	Choose a color that matches the intended design or theme. this should be a hex code value.

Advanced Editor example of a set up step slider component

{
  "name": "taskTaskToggle",
  "label": "Toggle",
  "description": "Will show red and the text zero to four if the value is between 0 and 4 and will show green and the text four to ten if the value is above 4",
  "defaultValue": "",
  "dataPath": "$.task.task.toggle",
  "isRequired": false,
  "isReadOnly": false,
  "isHidden": false,
  "width": "col-6",
  "condition": "",
  "recalculateDefaultValueWhenDataPathChange": [],
  "validation": [],
  "properties": {
    "tooltip": "Example tooltip for the step slider",
    "marks": 2,
    "minValue": 0,
    "maxValue": 10,
    "labels": [
      {
        "range": [
          0,
          4
        ],
        "label": "zero to four",
        "color": "#c93828"
      },
      {
        "range": [
          4,
          10
        ],
        "label": "four to ten",
        "color": "#42f599"
      }
    ]
  }
}