Slider Input Component

The Slider Input component displays a slider in which the learner can set a numerical value and the submitted value can be saved to a variable.

This article provides an overview of the Slider Input component, component setup and behavior, and examples of Slider Input component configurations.

Component overview

The Slider Input component is an interactive component that lets you display a slider in which the learner can set a numerical value. The Slider Input component is flexible and, with the configuration set to Allow Editing, the learner can edit the set value after submitting. The set value can also be saved to a variable.

The Slider Input component is fully responsive.

Component set up

Follow these steps to add the Slider Input component to a Block:

1. Click Add Component.
2. Use the component search or scroll to find the Slider Input component.
3. Click the Slider Input component and select Add Left, Add Full, or Add Right.

Click the Edit Component icon on the newly added Slider Input component to begin set up.

General section

In the General section:

Add Slider Input Title, or a Slider Input Display Title, as needed. Slider Input Display Title is seen by learners.

Scroll down and add your Slider Input Body. Use the text editor to style and format your text, as needed.

1. Add Slider Input Instruction Text that tells users how to use the component.
2. Include an Aria Label for screen readers, as needed.

Interaction Label section

In the Interaction Label section, you can enable an Interaction Label. The Interaction Label allows you to add a widget before or after the Slider Input component that can display an icon and label prior to the Slider Input component completion, which changes to a different icon and label once the Slider Input component is completed.

Slider section

In the Slider section, you set Default Value, Minimum Value, and Maximum Value for your Slider Input component.

Scroll down the page and set values for Slider Input Step, Slider Input Minimum Label, and Slider Input Maximum Label. Add Selected Label text to be displayed below the slider.

1. Enter Submit Button Text that will be shown on the submit button.
2. Enter Submitted Label Text that will be displayed once the submit button has been clicked.
3. Toggle to Allow Editing. Enabling this setting allows the learner to edit the set value after submitting it.
4. Enter Edit Button text, as needed.

Heads up!

Enabling Allow Editing does not reset the components completion status.

Component Examples

The Slider Input component gives you a lot of flexibility. Below are examples that illustrate the Slider Input component setup:

Example 1 – displays the Slider Input component before a value has been set.

Example 2 – displays the Slider Input component after a value has been submitted.

Example 3 – displays the Slider Input component after a value has been submitted. The Allow Editing setting is enabled in this example and the Edit Button is shown below the component.

Behaviour section

In the Behaviour section, you toggle to enable the setting Save User Answer to Variable. By default, this setting is disabled. If enabled, Select Variable or Create Variable.

Select Variable Save Type. Variable Save Type controls how the user's set value affects the value in the variable. Replace: replaces the current value of the variable with the value the learner saves in the component. Increment: increases the variable's value by the value that the learner saves in the component. Decrement: decreases the variable's value by the value that the learner saves in the component.

By default, Variable Save Type is set to Replace.

Did this article help?

Let us know by leaving a star rating or review at the top of this article.