How it works
A SliderTick represents one of the discrete marks drawn along a slider's track — the visual stops that indicate where the thumb can come to rest. When you constrain a Slider to fixed increments, SwiftUI lays out a SliderTick at each valid value so the control communicates its granularity at a glance and the thumb snaps cleanly to each one. Reach for ticks whenever a continuous range would be misleading and the user should feel they're choosing from a small, countable set of positions rather than sweeping freely.
Generate ticks with a stepped Slider
Ticks are not created by hand; they appear when a slider is given a fixed increment. Passing
step: 0.25toSlider(value: $volume, in: 0...1, step: 0.25)divides the0...1range into quarters and places aSliderTickat each boundary, so the track shows five evenly spaced marks.Bind the value the ticks quantize
Each tick corresponds to a value the bound state can hold. The
value: $volumebinding is what the thumb writes back, and because of the step the slider rounds the dragged position to the nearestSliderTick, sovolumeonly ever lands on 0, 0.25, 0.5, 0.75, or 1.Define the span the ticks divide
The bounds determine how many ticks exist and where they sit. The
in: 0...1range together with the step yields four equal intervals and therefore five ticks; widening the range or shrinking the step changes the count and spacing of theSliderTickmarks accordingly.Label the ends the ticks run between
Ticks read more clearly when the track's extremes are annotated. The
minimumValueLabelandmaximumValueLabelclosures place thespeaker.fillandspeaker.wave.3.fillimages at the first and lastSliderTick, framing what the leftmost and rightmost positions mean.Reflect the snapped value back to the reader
Because the thumb settles on a
SliderTick, the value is always a tidy increment you can display directly.Text("Volume: \(Int(volume * 100))%")shows 0, 25, 50, 75, or 100 percent — never an in-between figure — making the discrete nature of the ticks visible in the UI.
step: 0.25 to step: 0.1 in the Slider initializer and watch the number of SliderTick marks jump from five to eleven as the thumb begins snapping in tenths.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct SliderTickDemo: View {
@State private var volume = 0.5
var body: some View {
VStack(spacing: 16) {
Text("Volume: \(Int(volume * 100))%")
.font(.headline)
Slider(value: $volume, in: 0...1, step: 0.25) {
Text("Volume")
} minimumValueLabel: {
Image(systemName: "speaker.fill")
} maximumValueLabel: {
Image(systemName: "speaker.wave.3.fill")
}
}
.padding()
}
}