Slider
A slider is a control for choosing a value from a continuous range by dragging a thumb along a track. iOS calls it a Slider, and Material 3 adds a Range slider with two thumbs.
Why it matters
A slider suits a value where the exact number matters less than the feel, such as volume or brightness. For a wide range where precision matters, Apple suggests adding a text field and a stepper.
Direction is a convention: minimum on the leading side and maximum on the trailing side, so people never wonder which way is more.
Slider on iOS and Android
Also called Range slider. The same idea in each system, with the values Appetite UI gives it.
| Value | iOS | Android | Appetite UI |
|---|---|---|---|
| Name | Slider | Slider and Range slider | Slider and Range Slider |
| Track height | 6 pt in the file | 16 dp, Material Components default | See below |
| Thumb | 38 by 24 capsule in the file | 4 dp wide, 44 dp tall, 6 dp gap, Material Components | See below |
In Appetite UI
The Appetite UI Slider uses a 16 circle with a stroke and a soft shadow as its thumb, and a Range Slider has two. The docs page lists the iOS knob and the Material thumb measured in the file beside it.
Example
A music app shows a volume slider with a speaker icon on the leading end and a loud icon on the trailing end, so the minimum and the maximum are clear without a number.
Common mistakes
- Using a slider for a precise number. Add a field or a stepper, or pick another control.
- Putting the maximum on the leading side. Minimum goes on the leading side, maximum on the trailing side.
- Giving the thumb no larger touch area than its drawing.
- Hiding the current value when the exact value matters.
Questions
When should I use a slider instead of a stepper?
Use a slider for a continuous value where position is enough, and a stepper for small whole-number steps. For a wide range, use both beside a text field.
What is a range slider?
A slider with two thumbs that picks a minimum and a maximum, such as a price range. Material 3 names it Range slider and Appetite UI draws it as Range Slider.
Sources
The pages the facts above rest on, each read October 30, 2026.