Adding a Slider



Slider example.

The slider interaction in Bracken can be used to ask questions such as:

At what temperature does water boil? (Exact number.)
How far is it from Dunedin to Picton on State Highway 1? (Approximate number.)
Which speeds are shown on speed limit signs? (Multiple correct answers.)
Measure the largest knee joint angle when cycling. (No correct answer.)
Which is your favourite month? (Exact labels with no correct answer.)
How much do you agree with this statement? (Free choice from labels, no correct answer.)




Example sliders. (a) Vertical slider with degree units, correct answer. (b) Horizontal slider, incorrect answer. (c) Styled slider with answer labels. (d) Unanswered slider.


The slider stores a numerical value in a range between a minimum and maximum value. The value may be free or snapped to fixed increments.


It is possible to add labels to a slider for qualitative responses. For example, a question about the user’s agreement with a statement could be posed as a slider from 1 to 5, with 1 corresponding to “Disagree,” 2 to “Somewhat disagree,” and so on to 5 corresponding to “Agree.” In this case, the numerical values can be chosen to be meaningful as an answer; the same question could have used values 0 to 1 or 0% to 100%.


It is also possible to add units to a slider. These units are for display only; internally the slider stores the numerical value. This means that the units can’t be used to make conversions (such as m ↔ km or °C ↔ °F).


For technical reasons, we recommend using decimal numbers with fewer than 2 decimal places. For example, if a slider is used to ask for a distance in metres of 0.005 m, it would be better to pose the question in millimetres to have the answer 5 mm.



hmtoggle_plus1Creating a Slider Interaction

To insert a slider interaction, create a Cell and click the clip0096 Slider interaction button from the toolbar.

Slider interaction button.


hmtoggle_plus1 Parameters

Out Of

This field sets the maximum score achievable with this slider. When the Graded option is set, each answer can be assigned a numerical value, otherwise each answer is either correct or incorrect. If the result is qualitative only, the slider Out Of can be set to 0.



These two fields specify the start and end values on the slider. Horizontal sliders show the start and end values left to right. Vertical sliders show start and end values bottom to top. The values must be distinct, but do not need to be ascending. The start can be lower or higher than the end value.



If a snap value is specified, the thumb is snapped to steps of the given size. For a free slider, set this value to 0. A snap value should always be used if the slider question has an exact answer and is recommended for all sliders.


Show Range and Value

These options can be used to toggle the display of range (start and end values) and value (thumb position) on the slider.



Start value



End value



Current thumb value




The slider can be shown in horizontal or vertical layout. As described above, the horizontal slider works left-to-right, the vertical slider bottom-to-top.



This option can be used to add units or qualitative response labels. When the Labels button is clicked, the user is prompted to enter text in one of two forms:

To add units to the displayed answer, type the units here. Type “°” to insert a degree sign. The units are shown beside the range start and end values, as well as the current thumb value.
To add a collection of labels, type the labels, separated by commas. (The labels themselves cannot contain commas.) For example, typing “None, Some, All” will effectively split the slider into three sections corresponding to the three labels. If the Show Value option is checked, the slider will show the label nearest to the current thumb position.


The labels are used for display only. The result is still stored as a number that gets converted to labels when the slider is displayed.


Note: Safari will erase any labels when you click the prompt’s Cancel button.



Correct and incorrect answers are specified in the interaction table, along with feedback text for each. Out Of 0 interactions do not show feedback icons and text.


The label field includes a description hint text for the expected answer formats.


Hint text showing the expected answer formats.

Answers to slider interactions can take two forms.

Exact numerical value. To specify an exact value, type the number into the Label field. Do not include units.

e.g.          5          or        -3.1       

When specifying an exact answer, be sure to include a Snap value.

A range of values. To specify a range, type the lower and higher values separated by “ .. ” (two periods and spaces). Do not include units.

e.g.        5 .. 6        or   -3.1 .. +0.2 


The answers are evaluated from top to bottom until the first match is found. This can be used, for example, to provide feedback for a correct answer, followed by feedback for ranges of incorrect answers.


As the answer values are entered, the interaction builder scans the typed values to ensure that they are of the correct form.

If the text has the correct form, it is shown with a tick, e.g.     100 ✓ 
If the text is not correct, it is shown with a cross, e.g.     -3..6 ✗ 


When changing values, you can delete the tick / cross or leave it there to be updated when the new answer is scanned.




The slider length can be controlled via the width of the bounding box (or height, for vertical layout).





Drag the bounding box width to make the slider longer.


The thickness of the slider can be controlled via the height of the bounding box (or width, for vertical layout).


Drag the bounding box height to make the slider thicker.

Colours and Border

The slider background colour, border colour, and border width can be set via the Style toolbar. The background colour is applied to the thumb, with a faded colour of the same hue applied to the slider.

Slider styled with red background and 2 pixel black border.


The padding value has no effect.


hmtoggle_plus1Back References

As with other interactions, you can insert a back reference to a slider:

Select the slider interaction (blue bounding box).
Click Copy from the Content toolbar.
Go to the page where the back reference should be placed.
Click Paste from the Content toolbar.


The back reference will display the following text:

For an unanswered interaction, no text is displayed.
For a simple slider, the numerical answer is displayed.
For a slider with units (single label), the answer and unit are displayed.
For a slider with multiple labels, the two closest labels with a percentage weighting towards each. If the value exactly matches a single label, only the matched label is shown.




Numerical answer with units (degrees).

Answer near label “Neutral”.


hmtoggle_plus1Summary Page

The summary page shows a slider icon and numeric or text labels. The icon is always grey and horizontal, independent of styles applied in the module. The icon includes a thumb in its corresponding position on the slider.


The summary will display the following text:

For an unanswered interaction, no slider icon is shown and the text (Not answered) is displayed.
For a simple slider, the numerical answer is displayed.
For a slider with units (single label), the answer and unit are displayed.
For a slider that snaps to labels, the closest label is displayed.
For a free slider with labels, the label before and after the slider value are shown, with weighting on how much each of those two labels apply. The thumb is still shown in its position on the whole slider.


If the slider has a non-zero Out Of score assigned, then the feedback icon, text, and marks are shown below the answer.


Simple slider with numeric value, incorrect answer.

Slider with units (degrees), correct answer.



Slider snapping to label.

Free slider with five labels. This answer is half-way between “Somewhat agree” and “Agree,” which corresponds to 90% on the full slider.


Example Uses

hmtoggle_plus1Exact Number

Example: At what temperature does water boil?





When specifying a correct answer, remember to include a Snap value.

Vertical slider with snapping, exact answer, and single label as units (degrees).


hmtoggle_plus1Approximate number

Example: How far is it from Dunedin to Picton on State Highway 1?





In this case, we have not set a Snap value, so the answer is shown to 3 d.p. Setting a Snap of 1 or higher would reduce the decimal part of the answer.


Slider with approximate answer, no snapping, and single label as units (km).


hmtoggle_plus1Multiple correct labels

Example: During which month is Easter?





In this case, we have chosen the numerical answer to run from 1 to 12, corresponding to each month, with the answer snapping to each month. The correct answer can be either 3 (March) or 4 (April).

Slider snapping to labels, multiple correct labels values.


hmtoggle_plus1Qualitative labels

Example: How much do you agree with this statement?





For this qualitative question, we have set Out Of to 0. We’ve chosen numerical range 0–1, although 1–5 or 0%–100% would also work. You can choose the scale to suit any potential reports run over the data. The slider is configured to hide the interaction text, range, and value.


The module includes separate text boxes for the interaction text and labels to guide the user in choosing an answer on the slider.



Module view.

Summary page view.

The slider is set to hide the question text and current value. The text boxes were created separately to agree with the slider’s labels.