Slider Component

The Slider component lets you build in a question component that allows you to test the learners by having them select a number along a numerical scale that you set up.

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

Component overview

The Slider component is an interactive question component and is great for questions with numbers. The Slider component can be part of an assessment or used as a separate component in your course.

The Slider component is fully responsive and can be set up to display feedback and attempts counter as needed.

Component set up

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

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

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

General section

In the General section:

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

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

1. Add Slider 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 component that can display an icon and label prior to the Slider component completion, which changes to a different icon and label once the Slider component is completed.

Slider section

In the Slider section, you set the Range for your Slider component. Set Range minimum, Range maximum, and Range step as needed.

1. Scroll down at set the Slider component Labels. Set Range minimum label, Range maximum label, and Selected label as needed.
2. Finally, in the Slider section, you set the Correct answer. Enter the number that is correct for your Slider Question.

Component Examples

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

Example 1 – displays a Slider component set to range 1-10.

Example 2 – displays a Slider component with Feedback set to inline. That means that in this example the feedback is displayed beneath the Slider component.

Behaviour section

In the Behaviour section, you enter how many Attempts the learner is allowed for the Slider component. You can disable Display Attempts Counter, as needed. By default, this setting is enabled.

Feedback

The Feedback section lets you tailor feedback for correct, partly correct, or incorrect answered questions. Feedback can be displayed on the page, beneath the Slider component or as a notification pop-up.

For each type of feedback, you can choose to include:

• global feedback set up
• custom text as feedback
• custom imagery as feedback
• a link to a specific part of your course; if, for example, learners should revisit a particular section
• a feedback style that overrides the theme styles settings

Did this article help?

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