0

Slider

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
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.

Reply Oldest first
  • Oldest first
  • Newest first
  • Active threads
  • Popular
Like Follow
  • 3 mths agoLast active
  • 36Views
  • 2 Following

Home