# 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.

Page: https://www.appetiteui.com/glossary/slider. Slider design: iOS Slider vs Material 3 Slider. Also called Range slider.

## 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.

## iOS and Android

|  | iOS | Android (Material 3) | 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

1. [Apple Human Interface Guidelines: Sliders](https://developer.apple.com/design/human-interface-guidelines/sliders)
2. [Material Design 3: Sliders](https://m3.material.io/components/sliders/overview)
3. [Material Components for Android: Slider](https://github.com/material-components/material-components-android/blob/master/docs/components/Slider.md)

## Related

- Docs: [Slider](https://www.appetiteui.com/docs/slider)
- Docs: [Material 3](https://www.appetiteui.com/docs/material-3)
- Glossary: [Toggle and switch](https://www.appetiteui.com/glossary/toggle-switch)
- Glossary: [Text field](https://www.appetiteui.com/glossary/text-field)
- Glossary: [Touch target](https://www.appetiteui.com/glossary/touch-target)