Slider

updated 1 mth ago

Description

The Slider part creates a user-interactive slider mechanism to allow a user to set an input variable based on the position of the slider. Configuration settings allow you to choose the start and end numbers and the selection interval. Your choice of numbers impacts the user's experience when manipulating the slider:

A rigid slider with very specific points along the slider bar, denoting definitive values and differences; e.g. 1 to 10 with a "stop" at each integer (2, 3, 4).
A smooth slider without apparent specific landing points along the slider bar, allowing the user to determine where to rate the variable on the scale; e.g. a scale of 0 to 100.

The slider is added to the form part library, making it accessible from the nodes toolbox in Assessment Framework and Starter App Framework projects. It behaves much like any other form part in that it can have help/content resources added, and can adopt the same group styling etc.

The actual value chosen by the user is displayed in read only mode. This, along with the other labels are separate HTML elements and can be hidden or styled with CSS declarations. On first show, the slider can be given a default value (e.g. the mid point), or no value (in which case the slider is shown all the way to the left). Captions for the minimum and maximum values can be added.

Note that the slider is not currently supported by Speech Input.

Editor Fields

Basic and Style Tab Options

Field Name	Description/Use	Type/Options	Optional/Mandatory
HTML enabled	When this is enabled the question caption can be formatted using HTML.	Yes \| No	Optional
Caption	This is the caption shown in front of text-input control.	Text	Optional
Data object (Path)	This is the name of the data object in which the user input will be stored.	Dataobject	Mandatory
Default value	This is the value the system presents to the user and writes to context when no previous value exists.	Text	Optional
Min	This is the lowest value associated with the slider's far leftmost position. It can be numeric or $(...). It does not need to be 0, and it can be a negative value. This field defaults to 0 if left empty.	Number	Mandatory
Max	This is the highest value associated with the slider's far rightmost position. It must be higher than the minimum value. This field defaults to 100 if left empty.	Number	Mandatory
Step	This sets the granularity of the slider. A step of 1 combined with 0 and 10 for min and max will force the input to be a whole number. A step of .01 will create a smoother slider, where the user can select any position and the data object will contain the selected position as a number to two decimal places. This field defaults to 1 if left empty.	Number	Mandatory
Submit on change	This field is for use with Starter App Framework applications. You can choose to update the model when the user makes/changes their selection. For Assessment Framework applications, the system always submits the entry.	On \| Off	Mandatory
Format as currency	When using currency, check this box to open additional inputs for selecting the following: Currency symbol (defaults to $) Position of symbol (prefix or postfix)	On \| Off	Mandatory
Width	This is the width of the text area in pixels.	Text	Optional
Height	This is the height of the text area in pixels.	Text	Optional
Element template	In this field you can reference a dataobject containing a part-template. See part-templates for more information.	Dataobject	Optional

Validation Tab Options

Field Name	Description/Use	Type/Options	Optional/Mandatory
Type	When you configure this field, the system triggers a validation error when the user violates the configured condition. If you set it to mandatory the user must provide a value for that field.	Options	Optional
Condition	This is only required when type=custom. See Setting Conditions for more information.		Optional
Message	This is the message the system shows the user when he violates a validation rule. The system only displays the message for the first rule violated.		Optional

Advanced Tab Options

Field Name	Description/Use	Type/Options	Optional/Mandatory
Captions	This allows you to specify different captions based on rules. The system only displays one caption, the last caption in the table the rule determines to be true. If there is no rule the system determines to be true, the system uses the 'standard' caption. For an example, see Multi-Caption Example Project.	Text	Optional
Manual Slider Minimum Caption	This is the caption the system displays at the leftmost side of the slider, representing the minimum value. This can be $(...).	Text	Optional
Manual Slider Maximum Caption	This is the caption the system displays at the rightmost side of the slider, representing the maximum value. This can be $(...).	Text	Optional

Tips and Tricks

While it is not currently possible to directly assign text strings to different slider positions (e.g. for the use case of a slider from Very Satisfied to Very Unsatisfied), you can accomplish the same outcome by using a caption description. For example, you could use "On a scale of 1 to 10....." or "Indicate using the sliding scale your satisfaction level from Very Unsatisfied (left) to Very Satisfied (right)". While the slider stores numeric values, you can use a table to convert the score to a text string for ongoing use in the model or to display back to the user.

Use CSS declarations to change the look and/or position of key elements of the slider.

To hide the numeric input use the following declaration

.slider_part_input {display: none;}

To alter the look of the max values or captions use the following declaration, or similar: (use div#slider_min to style the 'min' caption

div#slider_max, div#slider_min  {
color: red;
font-weight: bold;
font-style: italic;
}

Example

Download the example project with various slider configurations here.

Release Version 7.4 +

Like Follow

2 yrs agoLast active
46Views
2 Following

cancel

Mention someone by typing their name

No matching users