Tick marks for sliders were added in iOS 26, as described in the SwiftUI updates for June 2025:
Slider now supports tick marks. Tick marks appear automatically when initializing a Slider with the step parameter.
In addition, some new init variants were added to Slider in iOS 26. These init variants make it possible to customize the ticks for the slider.
For example, init(value:in:step:neutralValue:enabledBounds:label:currentValueLabel:minimumValueLabel:maximumValueLabel:tick:onEditingChanged:) can be used together with a step parameter. The documentation for this particular init variant says:
Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks.
It seems to me that the only tick customization that this makes possible is to change the (non-visible) labels associated with the ticks. This might perhaps be useful for accessibility. However, I am wondering if the ticks can be changed in a visual way too, even if it is only to omit some of the ticks?
As an example, the code below creates a slider over the range 0…1000 with a step size of 1. This uses the init variant init(value:in:step:label:onEditingChanged:), available since iOS 13:
struct ContentView: View {
@State private var value = 500.0
var body: some View {
Slider(
value: $value,
in: 0...1000,
step: 1,
label: { Text("Value") }
)
.padding(.horizontal)
.padding(.vertical, 40)
.overlay(alignment: .top) {
Text("\(Int(value.rounded()))")
}
}
}
Due to the small step size, the ticks are very close together and merge into a solid line when running on an iPhone display:
It would be nice to be able to distinguish between major ticks, say at every 100, and minor ticks in a visual way, perhaps with a different color or larger size. It would at least help, if minor ticks could be omitted altogether.
Here is an attempt to use the new init variant described above to create a slider with step size of 1, but with tick marks only for values which are multiples of 100:
Slider(
value: $value,
in: 0...1000,
step: 1,
label: { Text("Value") },
tick: { val in
val.truncatingRemainder(dividingBy: 100) == 0 ? SliderTick(val) : nil
}
)
The extra tick closure seems to make absolutely no difference, the ticks look exactly the same as before.
How can the ticks for a Slider be customized in a visual way using any of the new init variants?
