Knobs & sliders
Small, satisfying ticks: a dial with 24 notches that turns forever, a slider that clicks at every step, and a scroll wheel to roll under a finger. Go slow for single clicks, fast for a ratchet.
Knobs and sliders
Click dial
0
Drag around it, use the mouse wheel, or arrow keys.
Twenty steps, one tick per step.
Scroll wheel
Drag up and down, or use the up and down arrow keys.
- Ticks this visit 0
Why detents feel good
A detent is a little notch that a moving part drops into: a spring-loaded ball or leaf rides over a bump and settles in the next dip. You feel it as a light resistance and hear it as a tick. Volume knobs, camera dials and mouse wheels all use them, because the tick tells you exactly how far you have turned without looking. On this page every notch you pass plays one short tick. Spin the dial quickly and the ticks run together into a ratchet; go slowly and you can count them.
How each one works
- Click dial: 24 notches per turn, no end stop, so it can turn forever. The number shows which notch it is on. Drag in a circle around the centre, scroll over it with a mouse wheel, or focus it and use the arrow keys (Page Up and Page Down jump six notches).
- Notched slider: a regular slider with 21 positions (0 to 20). It is your browser's own control, so it works with every keyboard and screen reader.
- Scroll wheel: drag it up or down like rolling a mouse wheel with your thumb. One tick every few pixels.
When you turn something very fast, the page plays at most one tick every 18 milliseconds and counts the rest silently, so a wild spin stays a ratchet instead of turning into a buzz.
Where you meet detents every day
Once you start listening for them, detents are everywhere. A mouse scroll wheel clicks once for each line it scrolls. A car's climate dial snaps between fan speeds. An oven knob has a firm notch at "off". Many hi-fi volume knobs have dozens of tiny ones so you can come back to the same level. Designers add them because a notch you can feel and hear tells you the control did something, even when you aren't looking at it. Remove the click and people turn a knob too far, or not far enough, and then look down to check.
Some knobs stop at both ends; others, like the dial on this page, spin forever and only count steps. Those endless ones usually sit on a part called a rotary encoder, which reports "one step this way" rather than an absolute position, so the device can keep its own count. That's why the number here wraps around after 23 instead of hitting a wall.
Little challenges
- Turn the dial exactly one full revolution: the number should land back where it started.
- Close your eyes, turn the dial by ear to 12, then look.
- Move the slider from 0 to 20 as slowly as you can, one tick at a time.
Limits
Sound starts after your first touch or key press. On iPhone, there is no vibration for websites, and silent mode mutes web audio unless "Play with the silent switch on" is ticked. On touch screens the dial and wheel hold on to your finger so you can turn them without scrolling the page.
Questions people ask
Does the dial have a maximum?
No. It is an endless dial, like the volume knob on many cars. The number simply wraps from 23 back to 0.
Why does a fast spin not tick for every notch?
Dozens of ticks in a split second would blur into a harsh buzz, so the sound is limited to one tick every 18 ms while the counter still counts every notch.
Can I use it with a keyboard only?
Yes. Tab to the dial, slider or wheel and use the arrow keys.
Does it work on phones?
Yes. On Android with Chrome you can also feel a tiny buzz per notch if vibration is on in the sound bar.
Are the ticks recorded?
No. Each one is a very short ring and click generated on your device.
Can I turn the dial backwards?
Yes. It counts every notch in both directions; turning back lowers the number and still ticks.
Why does the wheel only scroll the page when I am outside it?
While your finger or mouse is on the wheel, it catches the movement to roll the wheel instead. Move off it to scroll normally.
Does the dial remember its position?
Not between visits. Each time the page opens, the dial starts at 0 and the slider in the middle, like picking up a fresh toy.