Tick-slider widget

The tick-slider widget enables users to drag among tick values on a slider.

Example

Properties

Property

Description

Data type

context

JSONClosed containing the properties that define the visual appearance of the item, as described in Context properties.

string (JSON)

id

Unique identifier of this widget.

string

maxValue

Tick slider maximum value position.

integer

minValue

Tick slider minimum value position.

integer

showSliderValue

Indicates whether to display slider tick values as a user drags.

  • true: displays values from the tickValues array, described below.

  • false: displays minimum and maximum values.

Boolean

step

Tick slider step value.

integer

tickValues

Optional. Tick values rendered for every tick. Relevant only if showSliderValue, described above, is set to true. The values are displayed in the following format:
"tickValues":["Value1","Value3","Value3"],.

For example:
"tickValues":["Not Itchy","Itchy","Very Itchy"],, as shown in Example.

string

type Rich-media type, which is always Slider. string

Context properties

Context property

Description

Data type

backgroundColor

Tick slider background color, as a hex color code.

string (hex color code)

backgroundColorFrom

Tick slider gradient background from color, as a hex color code.

string (hex color code)

backgroundColorTo

Tick slider gradient background to color, as a hex color code.

string (hex color code)

progressColor

Tick slider progress color, as a hex color code.

string (hex color code)

Widget-specific expression evaluation

Property

Description

Data type

selectedTick

Example: #widget1.slider1.selectedTick

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"
}