Slider template
Use the Slider template to display the question as a slider.
The HtmlDocType must be set to <!DOCTYPE html> and the Control style Type must be set to Number, because this template uses HTML 5 features.
If the slider height or width does not look correct, set the height and width properties. You can set these properties in the following places:
▪In the uxui_template_props for the slider template. For example:
uxui_template_props = "{ width: '400px' }"
▪If the slider is in a grid, set the uxui_grid_col_width property on the grid. For example:
uxui_grid_col_width = "fit-content, 50%"
▪In the Cell Width or Height style property:
style(
Cell(
Width = "50%"
)
)
Associated uxui_template_props
initPosition
The initial position for the slider value indicator.
The default position is the leftmost value.
min, max, step
These values set up the values on the slider control.
min must be greater than the minimum specified in the metadata.
max must be less than the maximum specified in the metadata.
step specifies where the checkmarks are placed.
orientation
To create a horizontal slider, specify 0.
To create a vertical slider, specify 1, and then set an appropriate height.
The default value is 1 (horizontal).
showValue
true shows the chosen value next to the slider.
The default value is false.
showLabel
Shows an extra label above the checkmarks.
To show only the number, specify number.
To show only the label, specify label.
To show both the number and the label, specify both.
You must define the extra labels as part of the question label.
For a grid, define the extra labels as part of the grid question label. Grid labels are displayed only if shareTicks is true.
The following example defines three labels to go with three of the checkmarks.
HDATA ""
[
HtmlDoctype = "<!DOCTYPE html>"
];
qtest "Please rate.
<span class='slider-extra-labels'>
<span data-value='1'>Strongly disagree</span>
<span data-value='3'>Normal</span>
<span data-value='5'>Strongly agree</span>
</span>"
[
uxui_template_name = "Slider",
uxui_template_props = "{ showLabel: 'both' }"
]
style(
Control(
Type = "Number"
)
)
long [1 .. 5]
initialanswer(3);
The default value is both.
onlyShowTickNumberForLabel
true shows only the labels defined in spans as by
showLabel.
false does not display the tick lines. This is useful if you want to show long labels at the ends of the slider without the labels wrapping. These labels can extend over the areas that are unlabeled.
The default value is true.
showTickLine
true shows tick lines for each grid position.
The default value is true.
shareTicks
Applies only to grids. The tick lines extend across the grid being “shared” between all sliders. To show headers for a grid, set this option to true.
The default is false.
height
Set the height of the slider area.
width
Set the width of the slider area.
padding
Padding adds space to each side of the slider bar.
The default value is 20.
extraLabelSpace
For horizontal sliders, this property adds space between the question label and the slider. It is useful for long labels that might be cut off. The labels are wrapped into the extra space.
For vertical sliders, this property adds space to the right of the slider; it can be used to stop longer labels from wrapping.
The default value is 40.
separateOthers
Controls where the errors, and any extra codes like “Don’t know” or “No answer” are placed:
true uses a separate column for the extra items.
false includes the extra items below the slider control.
The default value is true.
Applies to
Long questions
Examples
HDATA ""
[
HtmlDoctype = "<!DOCTYPE html>"
];
VerticalSlider "Please rate"
[
uxui_template_name = "slider",
uxui_template_props = "{ orientation: 1, height: '400px' }"
]
style(
Control(
Type = "Number"
)
)
long [1 .. 5]
initialanswer(3);
See