Choosing Values with Slider
Pick a number in a range with a slider.
Choosing Values with Slider is a free SwiftUI Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the SwiftUI Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Meet the Slider
A Slider lets users drag to pick a number from a range. Think volume, brightness, or any smooth, continuous value. 🎚️
Sliders Hold a Number
A Slider works with a Double. As the user drags the thumb, that value updates continuously across its range.
@State private var volume = 0.5Bind to State
Connect the Slider to your value with the dollar sign binding, exactly like Toggle. Dragging then updates the number live.
Slider(value: $volume)Set the Range
By default a Slider runs from 0 to 1. Pass an explicit range to choose your own minimum and maximum.
Slider(value: $volume, in: 0...100)Snap with a Step
Add a step so the value jumps in fixed increments instead of any decimal, which is great for whole numbers.
Slider(value: $level, in: 0...10, step: 1)Show the Current Value
Read the bound number to display it, so users see exactly where the slider sits as they drag.
Text("Volume: \(Int(volume))")Add Edge Labels
Use the closure parameters to put labels at each end of the track, like icons for quiet and loud.
Slider(value: $volume, in: 0...100) {
Text("Volume")
}Tint the Track
Color the filled portion of the slider with the tint modifier so it matches your app's style.
Slider(value: $volume).tint(.orange)Detect Drag Start and End
The onEditingChanged closure fires when dragging begins and ends, handy for committing a value once.
Slider(value: $v) { editing in
isDragging = editing
}Drive Other Views
The slider value can control anything. Here it sets a circle's scale, so the shape grows as you drag.
Circle().scaleEffect(volume)The Full View
This view ties it together: a Slider over a custom range plus a Text that reflects the live value.
struct VolumeView: View {
@State private var volume = 50.0
var body: some View {
Slider(value: $volume, in: 0...100)
Text("\(Int(volume))")
}
}Quick Check
How do you make a Slider produce whole numbers from 0 to 10?
Recap
A Slider binds to a Double, takes an in range and optional step, and updates live so other views can react. 🎚️
Frequently asked questions
Is the “Choosing Values with Slider” lesson free?
Yes — the full text of “Choosing Values with Slider” is free to read here on the web, and the SwiftUI Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the SwiftUI Academy course, upgrade to CoddyKit PRO.
What will I learn in “Choosing Values with Slider”?
Pick a number in a range with a slider. You practise SwiftUI Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start SwiftUI Academy?
No prior experience is required. SwiftUI Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Choosing Values with Slider” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this SwiftUI Academy lesson?
Yes. Every SwiftUI Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- On/Off with Toggle
- Choosing Values with Slider
- Incrementing with Stepper
- Selecting Options with Picker