How it works
SliderTickContent is the protocol that describes the tick marks drawn along a slider's track. When you supply a tick builder to a Slider, the views you produce inside it conform to SliderTickContent, letting SwiftUI lay out, position, and style the marks that annotate the slider's range. Reach for it when a plain continuous slider isn't enough and you want visible, value-anchored reference points — for example, to show the discrete stops of a stepped control or to call out meaningful values along the track.
Produce tick content inside a Slider's tick builder
A
Slideraccepts a closure whose result conforms toSliderTickContent; whatever views you return there become the track's tick marks. In the example the builder is the trailing closure passed alongsideSlider(value: $volume, in: 0...10, step: 1), and its body resolves toSliderTickContent.Place a mark at a value with SliderTick
The primitive that conforms to
SliderTickContentisSliderTick, which takes the position on the slider's value axis where the mark should sit. HereSliderTick(Double(i))anchors a tick to each integer value, so the mark forilands at exactly that point within the0...10range.Generate many ticks with ForEach
Because
SliderTickContentcomposes like other SwiftUI content, you can drive it withForEachto emit a tick per value instead of writing each one by hand.ForEach(0..<11)walks the eleven stops and yields aSliderTickfor each, producing the full row of marks across the track.Align ticks with the slider's step
Tick positions are interpreted in the slider's own coordinate space, so they read most clearly when they match its
step. Withstep: 1over0...10, the elevenSliderTickmarks line up with the exact values the thumb can snap to, turning each tick into a labeled snap target.
ForEach(0..<11) to ForEach(0..<6) and emit SliderTick(Double(i) * 2) so ticks appear only at 0, 2, 4, 6, 8, 10, and watch how SliderTickContent thins the marks to every other value.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 SliderTickContentDemo: View {
@State private var volume = 5.0
var body: some View {
VStack(spacing: 16) {
Text("Volume: \(Int(volume))")
.font(.headline)
Slider(value: $volume, in: 0...10, step: 1) {
ForEach(0..<11) { i in
SliderTick(Double(i))
}
}
}
.padding()
}
}