Interactive previews iPhone

Slider Color

Customizing the color of the slider

Slider Color - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview

Platform Compatibility

iOS 15.0+ iPadOS 15.0+ macOS 12.0+ watchOS 8.0+ visionOS 1.0+

Tags

SwiftUI Code

Docs
@State private var speed = 42.0
@State private var isEditing = false

var body: some View {
    VStack {
        Slider(
            value: $speed,
            in: 0 ... 100,
            step: 2 // optional, by default 1,
        )
        Slider(
            value: $speed,
            in: 0 ... 100,
            step: 2 // optional, by default 1,

        ) {
            Text("Foo") // for accessibility
        } minimumValueLabel: {
            Text("0")
        } maximumValueLabel: {
            Text("100")
        } onEditingChanged: { editing in
            isEditing = editing
        }
    }
    .tint(.red)
}

Found an issue or have a suggestion?

Created: June 4, 2025Updated: December 27, 2025
Connect Wizard

Connect Wizard

Unlock insights App Store Connect doesn’t show you.

Get Started

More Slider Components

View all
SliderTickContentForEach - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

SliderTickContentForEach

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

Custom Slider Ticks - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

Custom Slider Ticks

Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks.

Stepped Min Max Label Slider - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

Stepped Min Max Label Slider

Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels

Stepped Slider - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

Stepped Slider

Creates a slider to select a value from a given range, subject to a step increment

Slider - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

Slider

Creates a slider to select a value from a given range

Explore Other Components

Browse all
InsetGroupedListStyle - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
style

InsetGroupedListStyle

The list style that describes the behavior and appearance of an inset grouped list.

ContainerRelativeShape - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

ContainerRelativeShape

A shape that is replaced by an inset version of the current container shape. If no container shape was defined, is replaced by a rectangle

Outline Group - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
initializer

Outline Group

A structure that computes views and disclosure groups on demand from an underlying collection of tree-structured, identified data.

List Section Margins - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

List Section Margins

Set the section margins for the specific edges.

Refreshable List - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview
modifier

Refreshable List

Marks this view as refreshable.

Menu Action Button - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
initializer

Menu Action Button

Acts like a button and opens the menu on a secondary gesture

Hard ScrollEdgeEffect - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
style

Hard ScrollEdgeEffect

A scroll edge effect with a hard cutoff and dividing line

Menu Fixed Order - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview
modifier

Menu Fixed Order

Order items from top to bottom