Tick-slider widget
The tick-slider widget enables users to drag among tick values on a slider.
Example
Properties
Property |
Description |
Data type |
---|---|---|
|
JSON containing the properties that define the visual appearance of the item, as described in Context properties. |
string (JSON) |
|
Unique identifier of this widget. |
string |
|
Tick slider maximum value position. |
integer |
|
Tick slider minimum value position. |
integer |
|
Indicates whether to display slider tick values as a user drags.
|
Boolean |
|
Tick slider step value. |
integer |
|
Optional. Tick values rendered for every tick. Relevant only if For example: |
string |
type
|
Rich-media type, which is always Slider . |
string |
Context properties
Context property |
Description |
Data type |
---|---|---|
|
Tick slider background color, as a hex color code. |
string (hex color code) |
|
Tick slider gradient background from color, as a hex color code. |
string (hex color code) |
|
Tick slider gradient background to color, as a hex color code. |
string (hex color code) |
|
Tick slider progress color, as a hex color code. |
string (hex color code) |
Widget-specific expression evaluation
Property |
Description |
Data type |
---|---|---|
|
Example: |
string |
Code sample
var obj = {
"widgetType": "form",
"widgetView": "inline",
"nodes":
[{
"id": "view1",
"controls": {
"0": {
"type": "Slider",
"label": "Selet your itchy level",
"id": "sli1",
"minValue": 0,
"maxValue": 100,
"step": 50,
"tickValues": ["Not Itchy", "Itchy", "Very Itchy"],
"context": {
"backgroundColorFrom": "#FFCCCB",
"backgroundColorTo": "#FF0000",
"progressColor": "#ffd049"
}
}
}
}
],
"transitions": [
],
"initialView": "view1"
}
var obj = {
"widgetType": "form",
"widgetView": "inline",
"nodes":
[{
"id": "view1",
"controls": {
"0": {
"type": "Slider",
"id": "sli1",
"minValue": 0,
"maxValue": 100,
"step": 10,
"showSliderValue": true,
"context": {
"backgroundColorFrom": "#FFCCCB",
"backgroundColorTo": "#FF0000",
"progressColor": "#ffd049"
}
}
}
}
],
"transitions": [
],
"initialView": "view1"
}