Slider Component

This component is suitable for use when creating accessible courses.

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

To add this component, follow the steps in this article:

The Property Panel for the newly added component will then open automatically for you to customize set-up.

Or click anywhere on an existing component to open the Property Panel.

General section

In the General section:

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

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

1. Add 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. This widget 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 Correct answer. Enter the number that is correct for your Slider Question.

You can also set the Range for your Slider component. Set Range minimum, Range maximum, and Range step as needed.

Scroll down at set the Slider component Labels. Set Range minimum label, Range maximum label, and Selected label as needed.

You can set a Slider ARIA Label as needed.

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.

Behavior section

In the Behavior 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.