Sliders.
Sliders let learners adjust a value along a range. Used well, they're an intuitive way to explore relationships — turn a dial, see what changes. Used badly, they're a fiddly way to enter a number.
Adjusting a value along a range.
Sliders work when the relationship between the input and the output is something the learner can see or feel. Move the handle, watch the result change.
- Zooming in or out — into a diagram, a workplace, a process map.
- Adjusting a setting where the result is immediately visible.
- Self-rating: how confident are you on a scale of 0 to 10?
- Exploring "what if" — change one variable, see the others respond.
- Volume, opacity, speed, intensity — anything continuous.
Anything that needs precision.
If the exact value matters, use a number input or a select. Asking someone to slide to "37" on a 0–100 range is needlessly fiddly.
- Entering specific numbers (use a number input).
- Yes/no or on/off choices (use a toggle).
- Picking from a short list of options (use radio buttons).
- Anything where the learner can't see what their selection means.
Try it.
A common eLearning pattern: zooming into a workplace to introduce someone to their new environment. Move the slider to zoom in. Notice that the slider isn't really about picking a number — it's about exploring the scene.
You're looking at the whole office floor.
The slider here uses a native HTML <input type="range">. It's fully keyboard accessible — focus and use the arrow keys.
Get the visuals right.
Always show the current value
A slider on its own tells the learner nothing about what they've selected. Display the current value next to or above the slider — and update it as they drag. If the slider drives a visual change (like zoom), that's the value display.
Visible handle, large enough to grab
The drag handle (or thumb) should be at least 22px on the longest axis. Smaller handles are frustrating on touchscreens and impossible for users with motor difficulties. The track itself can be thin, but the handle has to be substantial.
Label the endpoints
"0 to 100" usually isn't enough. "Not at all" to "Completely" is better. "Whole office" to "A single desk" is better still. The learner needs to know what each end of the slider means.
Accessibility — semantics
Use <input type="range">. Native range inputs are keyboard-operable out of the box (left/right arrows, page up/down, home/end), screen reader–announceable, and properly support min, max, and step. Custom-built sliders almost always get accessibility wrong.
Accessibility — alternative input
If precision matters and a slider is the only way to enter a value, you're excluding users who can't drag. Pair the slider with a number input (or a set of preset buttons) for the same value. The slider becomes the friendly default; the number input is the fallback.
Steps and snapping
If only certain values are meaningful (1, 2, 3, 4, 5), set the step attribute so the slider snaps. Otherwise the learner might sit between values and not know what's "selected." For a continuous range (zoom, opacity), step="1" or smaller is fine.
How to use sliders that work.
The output has to be visible.
Sliders work when learners can see the effect of their input — the office zooms, the diagram scales, the line on the graph moves. If the output is hidden or abstract ("you scored 73"), a number input is clearer. The slider's whole superpower is that it's tactile.
Start at a meaningful position.
If the slider starts at 0 (or the leftmost position), the learner sees a default. Choose that default deliberately. For an office zoom, "whole office" (0%) is the right default — that's the orientation view. For a self-rating, "neither agree nor disagree" (the middle) is usually the right starting position.
Give learners reasons to move it.
A slider sitting on the page is just a slider. The learner moves it when the experience invites them: a prompt, a question, a visible change worth exploring. "Move the slider to discover the different parts of the office" is a clearer invitation than just sticking a slider on the screen.
Don't make a slider do two jobs at once.
If one slider controls zoom and changes the labelled content and reveals new hotspots, learners get confused about what their input is actually doing. Pick one thing the slider controls. Use additional UI for the rest.
Be careful with reverse sliders.
A slider where "less" is on the right and "more" is on the left feels wrong to most learners. Western reading order maps left-to-right onto a sense of "low to high." Buck this convention only when there's a real reason (a thermometer-style temperature scale, perhaps), and label both ends explicitly.
Sliders for Likert scales: usually no.
A 1–5 rating scale is almost always clearer as radio buttons. The slider feels modern but adds drag friction and ambiguity about whether 2.7 is a valid answer. If you must use a slider for a Likert scale, snap it to integer steps and show the current label.
Touch first.
A lot of corporate eLearning is consumed on phones during a commute or between meetings. A slider that's barely operable on touch (small handle, thin track) breaks the experience. Test on a phone before signing it off.
When you'd reach for a slider.
Zoom-and-explore office induction
New starter induction: zoom from the whole floor to individual desks to meet the team. The slider replaces a click-through map with something more spatial.
Self-rating confidence checks
"How confident do you feel about this topic, on a scale of 0 to 10?" Sliders work here when you want a continuous answer, not a category — and when the rating drives downstream content.
"What if" simulations
Adjust the inventory level, then see how customer satisfaction responds. The slider turns the input into an exploration. Works best in product, sales, or operations training.
Before/after image reveals
A common pattern in compliance training: slide between "before" and "after" images of a workspace setup, a customer interaction, or a hazard. The slider acts as a curtain rather than a value selector.
Want a course
built well?
We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.