TechnologiesSwiftUI

SliderTickContentForEach struct

iOSmacOStvOSwatchOSvisionOS✓ renders

A type of slider content that creates content by iterating over a collection.

How it works

SliderTickContentForEach is the view that SwiftUI constructs when you supply tick marks to a Slider through a ForEach, gathering each per-element SliderTick into a single piece of tick content the slider can lay out along its track. It exists so you can describe a slider's discrete stops programmatically — one tick per item in a collection — rather than spelling out every mark by hand. Reach for it whenever the number or position of ticks is driven by data or a range, such as a fixed set of rating steps, and you want each value in that range to render as its own visible snap target.

  1. Open a tick-content builder on Slider

    A slider gains discrete marks through a trailing ticks: builder closure, distinct from the label closure. Here the Slider(value:in:step:) call pairs a Text("Rating") label with a ticks: block, and everything you return inside that block becomes the slider's tick content.

  2. Drive the ticks with ForEach

    When you place a ForEach inside the ticks: builder, SwiftUI wraps the iterated marks in SliderTickContentForEach so the whole sequence behaves as one tick-content value. The example iterates ForEach(0...8, id: \.self), producing one tick for every integer rating from 0 through 8.

  3. Emit a SliderTick per element

    The body of the ForEach returns the actual mark for each element — a SliderTick positioned at a value on the slider's scale. For each index i, the example yields SliderTick(Double(i)), placing a tick at that exact rating; SliderTickContentForEach collects them and hands the assembled set to the slider.

  4. Keep ticks aligned to the value range and step

    Because each SliderTick is positioned by an explicit value, your tick values should match the slider's domain so the marks line up with where the thumb can land. The in: 0...8, step: 1 configuration mirrors the 0...8 range driving the ForEach, so every snap position the slider allows has a corresponding tick.

Try it — Change ForEach(0...8, id: \.self) to ForEach(stride(from: 0, through: 8, by: 2).map { $0 }, id: \.self) so only even ratings emit a SliderTick, and watch the slider draw marks at half as many positions.

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.

SliderTickContentForEach.swift
struct SliderTickContentForEachDemo: View {
    @State private var value = 4.0

    var body: some View {
        VStack(spacing: 16) {
            Text("Rating: \(Int(value))")
                .font(.headline)
            Slider(value: $value, in: 0...8, step: 1) {
                Text("Rating")
            } ticks: {
                ForEach(0...8, id: \.self) { i in
                    SliderTick(Double(i))
                }
            }
        }
        .padding()
    }
}
Live preview
Rating: 4
Rating: 4
swift → lexer → parser → sema → uiir → canvas Open in Studio ↗
What's new in SwiftUI 27 →