Dials.
A dial is a circular alternative to a slider — drag the handle around an arc to set a value. They look great, feel novel, and are surprisingly rarely the right choice.
Analogue-feeling, bounded inputs.
Dials work when the metaphor of "turning something up" is honest — temperature, volume, intensity, dosage. They also work when you want a self-rating to feel weightier than a straight slider.
- Confidence and self-rating where you want the input to feel considered.
- Bounded ranges where the visual circle reinforces the limit.
- Simulations of real-world dials (thermostat, volume knob).
- Pulse surveys where the dial replaces a flat slider for visual variety.
Anything you could do with a slider.
For most ranged inputs, a horizontal slider is clearer, easier on touchscreens, and accessible by default. Reach for a dial when the shape tells a story the slider can't.
- Linear ranges where left-to-right reads as "low to high."
- Inputs that need precision — dials are hard to land on exact values.
- Touch interfaces where the dial is too small to twist accurately.
- Anywhere the dial is decoration, not data.
Try it.
Drag the handle around the dial, or tap a position on the arc. The label updates with what the value represents — a common pattern in pre-course confidence checks.
How confident are you with this topic right now? Drag the handle to set your answer.
Under the hood, the dial is a styled <input type="range"> — same keyboard accessibility as a slider. The SVG is purely visual. This is the cleanest way to build a dial that doesn't break for screen reader users.
Get the visuals right.
Show the current value clearly
The handle on the arc shows the position, but a number or word in the centre confirms what the position means. A dial without a readout is decoration, not an input.
Generous handle size
Dials get used on touch devices more than developers expect. The drag handle should be at least 28px on touch targets. Smaller handles are fiddly on mouse and unusable on touch.
Label the arc, not the angles
Endpoint labels matter more on a dial than a slider — there's no inherent "left is low" intuition with a circle. Label both ends ("Not confident" / "Very confident") and consider a mid-point label for clarity.
Accessibility — build on top of a range input
Don't reinvent the input. Use a hidden <input type="range"> as the source of truth, and let the SVG visualise its state. You inherit keyboard handling, screen reader announcements, and form integration for free.
Accessibility — keyboard parity
The dial must respond to arrow keys, page up/down, home, end. If you've based it on a range input, this works automatically. If you've built it from scratch with click-and-drag handlers, you have to add it explicitly — and most don't.
Hover and focus feedback
The handle should grow or change colour on hover, and show a visible focus ring on keyboard focus. Without it, users have no signal that the dial is interactive at all — a frequent failure when dials are styled to look pretty rather than usable.
How to use dials that work.
Most of the time, just use a slider.
It's the unfashionable truth. Sliders are easier to operate, more accessible by default, and more compact. A dial is the right call when the shape contributes meaning — a thermostat, a dosage scale, a confidence gauge that benefits from feeling weightier than a flat slider. If the dial is just for variety, the slider wins.
Decide whether you need precise values.
Dials are bad at precision. Asking learners to land on exactly "73" is frustrating. If precise values matter, pair the dial with a number input or quick-select buttons (0, 25, 50, 75, 100). If precise values don't matter, you probably don't need them — and you can simplify the readout to a category ("low / medium / high") instead of a number.
Use step values to make picking easier.
A dial with step=1 lets the learner sit on any of 101 positions. A dial with step=5 lets them sit on 21. Fewer positions means easier landing on a "round" answer. For pulse surveys and confidence checks, steps of 5 or 10 are usually right.
The readout has to do work.
"0" doesn't tell the learner anything. "Not confident at all" does. Map the numeric value to a label that explains what they've selected. Update both the number and the label as they drag — the dial becomes a tool for finding the right answer, not just inputting one.
Don't start at zero by default.
If the dial starts at the minimum, learners may walk away without engaging — the position is already "set." A midpoint default ("neither agree nor disagree", "moderately confident") invites movement in either direction. Pick the starting position deliberately, not by accident.
Touchscreens need extra care.
Dragging a small handle around an arc on a phone is hard. Allow tapping anywhere on the arc to jump the handle there, not just dragging. Test on a real device — desktop trackpad testing flatters a dial in ways a phone won't.
If the dial is novel, brief the learner.
Most people have used a slider before; most have not used a web dial. A one-line instruction ("Drag the handle to set your answer") removes ambiguity. Don't assume the affordance is self-evident.
When you'd reach for a dial.
Pre-course confidence ratings
"How confident are you with this topic?" A dial reads as more considered than a slider — and the rating tends to be slightly more honest.
Real-world dial simulations
Training someone to operate a piece of equipment — a thermostat, a valve, a control panel. The interface should match the real thing.
Pulse surveys at the end of a course
"How useful did you find this?" A dial breaks up a survey full of flat scales and gives the question visual weight.
Comfort or wellbeing self-checks
"How comfortable are you right now, on a scale of 0 to 10?" A dial feels reflective in a way a slider doesn't — appropriate for the topic.
Want a course
built well?
We apply these principles on every course we build. Three-week delivery, transparent pricing, zero drama.