UI fundamentals · 6 min read
Toggles & sliders done right
Use switches for instant on/off, and sliders only when “about this much” is good enough.
Explained like for kids
A light switch turns the lamp on right away. A volume slider is for “a little louder.” Use the right toy for the job — and never put the number under your finger where you can’t see it.
Examples
Each example has a kid-friendly “why,” then a clear Don't and Do with a real UI mock so you can see the difference.
Switches mean “now”
Like for kids: When you flip a real light switch, the light changes instantly. App switches should feel the same.
Don’t
Toggle + separate “Apply settings” button
People expect the change already happened. Confusion follows.
Switch already felt “on”
Do
Toggle only when the setting applies immediately
Matches the physical mental model of a switch.
Changes apply the moment you flip
Binary on/off beats wordy radios
Like for kids: You don’t need two big signs saying On and Off next to a lamp. The switch position already tells the story.
Don’t
Radio buttons or segments just for on/off
Extra reading. Higher cognitive load for a simple binary.
Share data with third-party apps
Do
A clear toggle switch for binary settings
On/off is understood at a glance when contrast is strong.
Sliders for “about”, fields for “exact”
Like for kids: Sliding to land on exactly 154 lbs is like balancing on a skateboard while reading a ruler. Just type 154.
Don’t
Slider when a precise number is required
Tiny increments need high motor skill. Most people miss.
Weight (lbs)
154?
Almost impossible to land on 154
Do
Text field for exact values; slider for ranges/approx
Match the control to the precision people need.
Weight (lbs)
Precise value in one tap-type
Keep the number visible while dragging
Like for kids: If the number sits under your thumb, you’re choosing blind. Put the scoreboard where you can see it.
Don’t
Value labels below the slider thumb on mobile
Fingers cover the value during interaction.
Salary range
Finger covers the number
Do
Show values above the thumb
People can aim accurately without lifting their finger.
Salary range
Numbers stay visible while dragging
Remember these
- Toggles = immediate effect. No extra “Apply” button needed.
- Don’t use toggles for picking sizes or options that aren’t views.
- Sliders are for approximate ranges, not exact numbers.
- Put slider values above the thumb so fingers don’t cover them.
Inspired by Dos and Don’ts for Form Input — Toggles & Sliders (Anthony Tseng). Rewritten in plain language for learning — not a reprint of the originals.