# Field Types ## Header Simple header component `
`. This component can be used to separate and announce different form elements or sections. You can pass in an array of css content classes that Vuetify makes available - more information on the available classes available here. ### Screenshot ### Config Options | Property | Required/Optional | Default | Type | Notes | | -------------- | ----------------- | ------- | ---------------- | ------------------------------------------------------------------------------------------------- | | `header` | `required` | header | object | | | `header.label` | `required` | | String | Text you want to display as a header | | header.classes | optional | | Array of Strings | Any of the classes minus the preceding period sign - | ### JSON ```javascript { "header" : { "label" : "Rugby Time", "classes" : [ "headline", "font-weight-bold" ] } } ``` ## HTML Simple component to add any ad hoc html to your form. You can pass in an array of css content classes that Vuetify makes available - more information on the available classes available here. Make sure your HTML is escaped correctly so that it's still valid JSON that is being passed to the "formConfig" output parameter. ### Screenshot ### Config Options | Property | Required/Optional | Default | Type | Notes | | ------------ | ----------------- | ------- | ---------------- | ------------------------------------------------------------------------------------------------- | | `html` | `required` | | object | | | `html.label` | `required` | | String | HTML content | | html.classes | optional | | Array of Strings | Any of the classes minus the preceding period sign - | ### JSON ```javascript { "html" : { "label" : "

To install Vuetify, type npm install vuetify into your console. Once complete, type cd <project name> and run npm install

", "classes" : [ "body-2", "font-weight-regular" ] } } ``` ## Divider Simple component that adds a `
` that can be used to separate fields or logically separate sections of your form. ### Screenshot
### Config Options | Property | Required/Optional | Value | Type | Notes | | --------- | ----------------- | ----- | ------- | ----------------------------------------------- | | `divider` | `required` | true | Boolean | Adds a `
` as the specific part of the form | ### JSON ```javascript { "divider": true } ``` ## Alert
### Screenshot ### Config Options | Property | Required/Optional | Default | Type | Notes | | ------------------- | ----------------- | ----------- | ------- | ---------------------------------------------------------------------------------- | | `alert` | `required` | | Object | | | `alert.text` | `required` | undefined | String | The message you want to display in the alert box | | alert.type | optional | info | String | Specify a **success**, **info**, **warning** or **error** alert | | alert.border | optional | left | String | Puts a border on the alert. Accepts **top** \| **right** \| **bottom** \| **left** | | alert.elevation | optional | 2 | Integer | Designates an elevation applied to the component between 0 and 24 | | alert.coloredBorder | optional | true | Boolean | Applies the **color** defined by the type to the alert's border | | alert.dense | optional | false | Boolean | Decreases the alerts height | | alert.prominent | optional | false | Boolean | Displays a larger vertically centered icon to draw more attention | | alert.outlined | optional | false | Boolean | Makes the background transparent and applies a thin border | | alert.tile | optional | false | Boolean | Removes the component's border-radius | | alert.icon | optional | information | String | Any icon name from | ### JSON ```javascript { "alert" : { "text" : "Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. In auctor lobortis lacus.", "type" : "success", "border" : "left", "elevation" : 2, "coloredBorder" : true, "dense" : false, "prominent" : false, "outlined" : false, "tile" : false, "icon" : "account-edit" } } ``` ## Image Simple image component. You can control the image url, alt text, and max width and max height. The max width and max height can accept a pixel input and a percentage input. ### Screenshot ### Config Options | Property | Required/Optional | Default | Type | Notes | | --------------- | ----------------- | -------------- | ------ | -------------------------------------------------------------------- | | `image` | `required` | | Object | | | `image.src` | `required` | undefined | String | The image URL | | image.alt | optional | Random Picture | String | Alternate text for screen readers. Leave empty for decorative images | | image.maxWidth | optional | 100% | String | Sets the maximum width for the image. Can be pixels or percentage | | image.maxHeight | optional | 600 | String | Sets the maximum height for the image. Can be pixels or percentage | ### JSON ```javascript { "image" : { "alt" : "RWC 2019", "src" : "http://sportforbusiness.com/wp-content/uploads/JP-Rugby-worldcup-01.jpg", "maxWidth" : "100%", "maxHeight" : "600" } } ``` ## Input Field Configurable text input field. You can control the initial value, styling, icon selection and placement, masking, validations, hints, counters, placeholder text, prefix/append text and more. Many of the options are optional and sensible defaults are used. ### Screenshots
Location of label, placeholder, hint and counter
Hint text, counter, append outer icon and suffix
Clearable input fields
Counters
Labels and hints
Prefix and Suffix
### Config Options | Property | Required/Optional | Value | Type | Notes | | ------------------------ | ----------------- | --------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `textInput` | `required` | | Object | | | `textInput.name` | `required` | undefined | String | A unique `camelCase` name for this form element. This is the name that will be used when posting back the form data to Teneo | | `textInput.label` | `required` | undefined | String | Sets input label | | textInput.description | optional | undefined | String | If added produces a 2 column layout with the description in the left column. Can be used as an alternative for the [header field](#header) | | textInput.hint | optional | undefined | String | Hint text | | textInput.persistentHint | optional | true | Boolean | Forces hint to always be visible | | textInput.initialValue | optional | undefined | String | Populate the default if originally known from an integration call or gathered through conversation | | textInput.placeHolder | optional | undefined | String | Sets the input’s placeholder text | | textInput.style | optional | undefined | [Style Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/style) | Control the look for the form field | | textInput.clearable | optional | false | Boolean | Add input clear functionality | | textInput.dense | optional | false | Boolean | Reduces the input height | | textInput.counter | optional | false | Integer | Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. | | textInput.icons | optional | undefined | [Icons Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/icons-object) | Prepend, append icons outside and inside the field's display | | textInput.prefix | optional | undefined | String | Displays prefix text | | textInput.suffix | optional | undefined | String | Displays suffix text | | textInput.validations | optional | undefined | String | [VeeValidate validations](https://jolzee.gitbook.io/leopard/components/forms-1/forms/validation) can be combined together by separating them with a pipe sign \| | ### JSON ```javascript { "textInput" : { "name" : "username", "label" : "Email", "hint" : "Just the username part please", "initialValue" : "jolzee", "placeHolder" : "username", "style" : { "solo" : true, "outlined" : false, "flat" : false, "filled" : false, "rounded" : false, "shaped" : false, "soloInverted" : false }, "clearable" : true, "persistentHint" : true, "dense" : false, "counter" : 12, "icons" : { "prepend" : "", "prependInner" : "", "append" : "", "appendOuter" : "email-edit" }, "prefix" : "", "suffix" : "@gmail.com", "validations" : "required" } } ``` ## Text Area Configurable text area field. You can control the initial value, styling, icon selection and placement, masking, validations, hints, placeholder text, counters, rows, auto grow, prefix/append text and more. Many of the options are optional and sensible defaults are used. ### Screenshot
### Config Options | Property | Required/Optional | Default | Type | Notes | | ----------------------- | ----------------- | --------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `textarea` | `required` | | Object | | | `textarea.name` | `required` | undefined | String | A unique `camelCase` name for this form element. This is the name that will be used when posting back the form data to Teneo | | `textarea.label` | `required` | undefined | String | Sets input label | | textInput.description | optional | undefined | String | If added produces a 2 column layout with the description in the left column. Can be used as an alternative for the [header field](#header) | | textarea.hint | optional | undefined | String | Hint text | | textarea.initialValue | optional | undefined | String | Populate the default if originally known from an integration call or gathered through conversation | | textarea.autoGrow | optional | true | Boolean | Automatically grow the textarea depending on amount of text | | textarea.placeHolder | optional | undefined | String | Sets the input’s placeholder text | | textInput.style | optional | undefined | [Style Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/style) | Control the look for the form field | | textarea.clearable | optional | false | Boolean | Add input clear functionality | | textarea.persistentHint | optional | false | Boolean | Forces hint to always be visible | | textarea.rows | optional | 5 | Integer | Default row count | | textarea.dense | optional | false | Boolean | Reduces the input height | | textarea.counter | optional | undefined | Integer | Creates counter for input length; if no number is specified, it defaults to 25. Does not apply any validation. | | textarea.prefix | optional | undefined | String | Displays prefix text | | textarea.suffix | optional | undefined | String | Displays suffix text | | textarea.icons | optional | undefined | [Icons Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/icons-object) | Prepend, append icons outside and inside the field's display | | textarea.validations | optional | undefined | String | [VeeValidate validations](https://jolzee.gitbook.io/leopard/components/forms-1/forms/validation) can be combined together by separating them with a pipe sign \| | ### JSON ```javascript { "textarea" : { "name" : "bio", "label" : "Write a bio for yourself", "description" : "Please write a Bio about yourself.", "hint" : "Keep it brief and to the point", "initialValue" : "Bacon ipsum dolor amet rump ham hock sirloin doner fatback beef kielbasa picanha leberkas sausage buffalo capicola. Shoulder tail pancetta tenderloin. ", "autoGrow" : true, "placeHolder" : "Peter Joles is a Sales Engineer at Artificial Solutions...", "style" : { "solo" : false, "outlined" : false, "flat" : false, "filled" : true, "rounded" : false, "shaped" : false, "soloInverted" : false }, "clearable" : true, "persistentHint" : true, "rows" : 5, "dense" : false, "counter" : 12, "prefix" : "", "suffix" : "", "icons" : { "prepend" : "", "prependInner" : "", "append" : "", "appendOuter" : "file-document-edit" }, "validations" : "required" } } ``` ## Select Configurable select field. You can control the initial value, options, styling, icon selection and placement, validations, hints, placeholder text and more. Many of the options are optional and sensible defaults are used. ### Screenshot ### Config Options | Property | Required/Optional | Default | Type | Notes | | --------------------- | ----------------- | --------- | --------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `select` | `required` | select | Object | | | `select.name` | `required` | undefined | String | A unique `camelCase` name for this form element. This is the name that will be used when posting back the form data to Teneo | | `select.label` | `required` | undefined | String | Sets input label | | select.description | optional | undefined | String | If added produces a 2 column layout with the description in the left column. Can be used as an alternative for the [header field](#header) | | select.hint | optional | undefined | String | Hint text | | select.initialValue | optional | undefined | String | Populate the default if originally known from an integration call or gathered through conversation | | select.chips | optional | false | Boolean | Changes display of selections to chips | | select.deletableChips | optional | true | Boolean | Adds a remove icon to selected chips | | select.persistentHint | optional | true | Boolean | Forces hint to always be visible | | select.clearable | optional | true | Boolean | Add input clear functionality | | select.multiple | optional | false | Boolean | Changes select to multiple | | select.dense | optional | false | Boolean | Reduces the input height | | select.hideSelected | optional | true | Boolean | Hide items from the drop down that have already been selected | | select.items | optional | undefined | Array of Strings | `["South Africa", "England", "U.S.A."]` | | select.style | optional | optional | [Style Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/style) |

Control the look for the form field

| | select.icons | optional | undefined | [Icons Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/icons-object) | Prepend, append icons outside and inside the field's display | | select.validations | optional | undefined | String | [VeeValidate validations](https://jolzee.gitbook.io/leopard/components/forms-1/forms/validation) can be combined together by separating them with a pipe sign \| | ### JSON ```javascript { "select" : { "name" : "favoriteRugbyTeam", "label" : "What's your favorite Rugby Team", "hint" : "Go with the Green and Gold", "initialValue" : "South Africa", "chips" : true, "deletableChips" : false, "persistentHint" : true, "clearable" : true, "multiple" : false, "dense" : false, "hideSelected" : true, "items" : [ "England", "South Africa", "New Zealand" ], "style" : { "solo" : true, "outlined" : false, "flat" : false, "filled" : false, "rounded" : false, "shaped" : false, "soloInverted" : false }, "icons" : { "prepend" : "", "prependInner" : "", "append" : "", "appendOuter" : "football-australian" }, "validations" : "required" } } ``` ## Combo Box Configurable combo box field. This field can allow multiple items to be selected. You can control the initial selections, selectable options, styling, icon selection, validations, hints, placeholder text and more. Many of the options are optional and sensible defaults are used. ### Screenshot
Dense
### Config Options | Element | Required/Optional | Default | Type | Notes | | ----------------------- | ----------------- | --------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `comboBox` | `required` | | Object | | | `comboBox.name` | `required` | undefined | String | A unique `camelCase` name for this form element. This is the name that will be used when posting back the form data to Teneo | | `comboBox.label` | `required` | undefined | String | Sets input label | | comboBox.description | optional | undefined | String | If added produces a 2 column layout with the description in the left column. Can be used as an alternative for the [header field](#header) | | comboBox.hint | optional | undefined | String | Hint text | | comboBox.persistentHint | optional | true | Boolean | Forces hint to always be visible | | comboBox.chips | optional | false | Boolean | Changes display of selections to chips | | comboBox.multiple | optional | true | Boolean | Changes combo box to multiple | | comboBox.hideSelected | optional | true | Boolean | Do not display in the select menu items that are already selected | | comboBox.deletableChips | optional | true | Boolean | Adds a remove icon to selected chips | | comboBox.clearable | optional | true | Boolean | Add input clear functionality | | comboBox.dense | optional | false | Boolean | Reduces the input height | | comboBox.items | optional | undefined | Array of Objects |

\[

{

"text": "Java",

"value": "java"

},

{

"text": "Node JS",

"value": "nodejs"

}

]

| | comboBox.style | optional | undefined | [Style Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/style) | Controls the styling of the field | | comboBox.openOnClear | optional | false | Boolean | When using the **clearable** prop, once cleared, the select menu will either open or stay open, depending on the current state | | comboBox.icons | optional | undefined | [Icons Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/icons-object) | Prepend, append icons outside and inside the field's display | | comboBox.validations | optional | undefined | String | [VeeValidate validations](https://jolzee.gitbook.io/leopard/components/forms-1/forms/validation) can be combined together by separating them with a pipe sign \| | ### JSON ```javascript { "comboBox" : { "name" : "skills", "label" : "What programming skill do you have?", "hint" : "Don't worry if we don't have a skill listed", "chips" : true, "multiple" : true, "hideSelected" : false, "deletableChips" : true, "clearable" : true, "dense" : false, "items" : [ { "text":"Java", "value":"java" }, { "text" : "Node JS", "value" : "nodejs" } ], "style" : { "solo" : true, "outlined" : false, "flat" : false, "filled" : false, "rounded" : false, "shaped" : false, "soloInverted" : false }, "openOnClear" : false, "icons" : { "prepend" : "", "prependInner" : "", "append" : "", "appendOuter" : "code-braces" }, "validations" : "required" } } ``` ## Check Box Configurable checkbox field. You can control the label, styling, icon selection, validations and hints Many of the options are optional and sensible defaults are used. ### Screenshot ### Config Options | Property | Required/Optional | Default | Type | Notes | | ----------------------- | ----------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `checkbox` | `required` | | Object | | | `checkbox.name` | `required` | undefined | String | A unique `camelCase` name for this form element. This is the name that will be used when posting back the form data to Teneo | | `checkbox.label` | `required` | undefined | String | Sets input label | | checkbox.description | optional | undefined | String | If added produces a 2 column layout with the description in the left column. Can be used as an alternative for the [header field](#header) | | checkbox.hint | optional | undefined | String | Hint text | | checkbox.persistentHint | optional | true | Boolean | Forces hint to always be visible | | checkbox.dense | optional | false | Boolean | Reduces the input height | | checkbox.initialValue | optional | undefined | String | Populate the default if originally known from an integration call or gathered through conversation | | checkbox.mustBeChecked | optional | false | String | Ensures that the check box is checked before the form is validated | | checkbox.color | optional | success | String | Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the Vuetify [colors page](https://vuetifyjs.com/styles/colors#material-colors) | ### JSON ```javascript { "checkbox" : { "name" : "agreedToTerms", "label" : "Do you agree to our terms and conditions?", "hint" : "You have to agree before submitting this form", "persistentHint" : true, "dense" : false, "initialValue" : false, "mustBeChecked" : true } } ``` ## Switch Configurable switch field that returns either true or false based on the operation on the switch. You can control the styling, icon selection, validations, hints, placeholder text and more. Many of the options are optional and sensible defaults are used. ### Screenshot ### Config Options | Property | Required/Optional | Default | Type | Notes | | --------------------- | ----------------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `switch` | `required` | | Object | | | `switch.name` | `required` | undefined | String | A unique `camelCase` name for this form element. This is the name that will be used when posting back the form data to Teneo | | `switch.label` | `required` | undefined | String | Sets input label | | switch.description | optional | undefined | String | If added produces a 2 column layout with the description in the left column. Can be used as an alternative for the [header field](#header) | | switch.persistentHint | optional | true | Boolean | Forces hint to always be visible | | switch.dense | optional | false | Boolean | Reduces the input height | | switch.hint | optional | undefined | String | Hint text | | switch.initialValue | optional | false | Boolean | Populate the default if originally known from an integration call or gathered through conversation | | switch.inset | optional | false | Boolean | Changes the styling of the switch | | switch.validations | optional | undefined | String | [VeeValidate validations](https://jolzee.gitbook.io/leopard/components/forms-1/forms/validation) can be combined together by separating them with a pipe sign \| | | switch.color | optional | success | String | Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the Vuetify [colors page](https://vuetifyjs.com/styles/colors#material-colors) | ### JSON ```javascript { "switch" : { "name" : "newsLetter", "label" : "Do you want to receive our monthly newsletter?", "persistentHint" : false, "dense" : false, "hint" : "We won't spam - ever!", "initialValue" : true, "inset" : false } } ``` ## Radio Buttons Configurable radio button group field. You can control the options, styling, icon selection, validations, hints and more. Many of the options are optional and sensible defaults are used. ### Screenshot ### Config Options | Property | Required/Optional | Default | Type | Notes | | -------------------- | ----------------- | --------- | --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `radio` | `required` | | Object | | | `radio.name` | `required` | undefined | String | A unique `camelCase` name for this form element. This is the name that will be used when posting back the form data to Teneo | | `radio.label` | `required` | undefined | String | Sets input label | | radio.description | optional | undefined | String | If added produces a 2 column layout with the description in the left column. Can be used as an alternative for the [header field](#header) | | radio.dense | optional | false | Boolean | Reduces the input height | | radio.hint | optional | undefined | String | Hint text | | radio.persistentHint | optional | true | Boolean | Forces hint to always be visible | | radio.mandatory | optional | false | Boolean | Forces a selection on a `v-radio` child | | radio.multiple | optional | false | Boolean | Changes radio to multiple | | radio.row | optional | false | Integer | Displays radio buttons in row | | radio.items | optional | undefined | Array of Objects |

\[{

"label": "The radio label",

"value": "theFormValue" }]

| | radio.icons | optional | undefined | [Icons Object](https://jolzee.gitbook.io/leopard/components/forms-1/forms/icons-object) | Prepend, append icons outside and inside the field's display | | radio.validations | optional | undefined | String | [VeeValidate validations](https://jolzee.gitbook.io/leopard/components/forms-1/forms/validation) can be combined together by separating them with a pipe sign \| | | radio.color | optional | success | String | Applies specified color to the control - it can be the name of material color (for example `success` or `purple`) or css color (`#033` or `rgba(255, 0, 0, 0.5)`). You can find list of built in classes on the Vuetify [colors page](https://vuetifyjs.com/styles/colors#material-colors) | ### JSON ```javascript { "radio" : { "name" : "ageRange", "label" : "What's you age range?", "dense" : false, "hint" : "Please don't lie 😁", "persistentHint" : true, "mandatory" : true, "multiple" : false, "row" : false, "items" : [ { "label" : "18-25", "value" : "18to25" }, { "label" : "26-45", "value" : "26to45" } ], "icons" : { "prepend" : "gesture-tap-hold", "append" : "" } } } ``` ## Slider Many of the options are optional and sensible defaults are used. ### Screenshots
Color, Labels Icons and Hint Text
Tumbs
Ticks
Colors
### Config Options | Property | Required/Optional | Value | Type | Notes | | --------------------- | ----------------- | --------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `slider` | `required` | | Object | | | `slider.name` | `required` | undefined | String | A unique `camelCase` name for this form element. This is the name that will be used when posting back the form data to Teneo | | `slider.label` | `required` | undefined | String | Sets input label | | slider.description | optional | undefined | String | If added produces a 2 column layout with the description in the left column. Can be used as an alternative for the [header field](#header) | | slider.hint | optional | undefined | String | Hint text | | slider.persistentHint | optional | true | Boolean | Forces hint to always be visible | | slider.initialValue | optional | undefined | String \| Array of String | Populate the default if originally known from an integration call or gathered through conversation | | slider.color | optional | success | String | Main color slider | | slider.range | optional | false | Boolean | Set to true if you want the slider to be a range \[ "start", "end"] slider. | | textInput.dense | optional | false | Boolean | Reduces the input height | | slider.prependIcon | optional | undefined | String | Any icon name from | | slider.appendIcon | optional | undefined | String | Any icon name from | | slider.min | optional | 0 | Integer / String | Sets the minimum allowed value | | slider.max | optional | 100 | Integer / String | Sets the maximum allowed value | | slider.step | optional | 1 | Integer | If greater than 0, sets step interval for ticks | | slider.thumbColor | optional | undefined | String | Sets the thumb and thumb label color | | slider.thumbLabel | optional | true | Boolean / String | Show thumb label. If `true` it shows label when using slider. If set to `'always'` it always shows label. | | slider.thumbSize | optional | 32 | Integer / String | Controls the size of the thumb label. | | slider.ticks | optional | false | Boolean / String | Show track ticks. If `true` it shows ticks when using slider. If set to `'always'` it always shows ticks. | | slider.tickLabels | optional | \[ ] | Array | When provided with Array, will attempt to map the labels to each step in index order | | slider.trackColor | optional | undefined | String | Sets the track's color | | slider.trackFillColor | optional | undefined | String | Sets the track's fill color | | slider.validations | optional | undefined | String | [VeeValidate validations](https://jolzee.gitbook.io/leopard/components/forms-1/forms/validation) can be combined together by separating them with a pipe sign \| | ### Slider JSON ```javascript { "slider" : { "name" : "musicVolume", "label" : "Volume", "hint" : "Louder is better 😉", "persistentHint" : true, "color" : "success", "dense" : false, "prependIcon" : "volume-low", "appendIcon" : "volume-high", "initialValue" : "50", "range" : false, "min" : 0, "max" : 100, "step" : 2, "thumbColor" : "primary", "thumbLabel" : true, "thumbSize" : 32, "ticks" : true, "tickLabels" : [], "trackColor" : "error", "trackFillColor" : "success", "validations" : "required" } } ``` ### Range Slider JSON ```javascript { "slider" : { "name" : "musicVolumeRange", "label" : "Volume Range", "hint" : "Anything goes", "persistentHint" : true, "color" : "success", "dense" : false, "prependIcon" : "volume-low", "appendIcon" : "volume-high", "initialValue" : [ "20", "80" ], "range" : true, "min" : 0, "max" : 100, "step" : 2, "thumbColor" : "primary", "thumbLabel" : true, "thumbSize" : 32, "ticks" : true, "tickLabels" : [], "trackColor" : "error", "trackFillColor" : "success", "validations" : "required" } } ```