Stepper vs. Slider
A stepper changes a number by set steps. A slider chooses a place along a range.
Use a stepper for small, exact changes. Use a slider when rough position matters more than typing an exact number. Always show the value and support the keyboard.
See what each pattern does
Try each example. Then read about the job it is made to do.
macOS Stepper
A macOS Stepper has one button to add and one to subtract. It changes a value with set limits by a fixed step.
A layout inspector changes the grid from four columns to five. The user does not need to type a number.
- Use it when
- Use it for a number with clear limits and small steps. It works best when people change one or two steps at a time.
- Do not use it when
- Avoid wide or smooth ranges and large, fast changes. Add a number field when people must enter or compare exact values.
- Name used in code
AppKit NSStepper / SwiftUI Stepper
macOS Slider
A macOS Slider has a track and a movable thumb. It chooses a value within set limits, either freely or in set steps, and may show tick marks.
A sound editor moves volume from silent to full. VoiceOver also announces the number.
- Use it when
- Use it when dragging through a range and seeing the result at once helps. Support a smooth range or clear steps with ticks and keyboard keys.
- Do not use it when
- Do not use it for categories, unlimited ranges, or safety-critical precision. Add a matching number field when people must repeat an exact value.
- Name used in code
AppKit NSSlider / SwiftUI Slider
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| macOS Stepper | Use it for a number with clear limits and small steps. It works best when people change one or two steps at a time. | Avoid wide or smooth ranges and large, fast changes. Add a number field when people must enter or compare exact values. | AppKit NSStepper / SwiftUI Stepper |
| macOS Slider | Use it when dragging through a range and seeing the result at once helps. Support a smooth range or clear steps with ticks and keyboard keys. | Do not use it for categories, unlimited ranges, or safety-critical precision. Add a matching number field when people must repeat an exact value. | AppKit NSSlider / SwiftUI Slider |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from macOS Stepper, macOS Slider for our real user flow. Use this rule: A stepper changes a number by set steps. A slider chooses a place along a range. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.