--- title: "Slider Color | Explore SwiftUI" description: "Customizing the color of the slider. Learn how to use Slider Color in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." canonical_url: "https://exploreswiftui.com/library/slider/slider-color" meta: author: "Explore SwiftUI" "og:description": "Customizing the color of the slider. Learn how to use Slider Color in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Slider%2BColor%2Cdescription_Customizing%2Bthe%2Bcolor%2Bof%2Bthe%2Bslider%2Ccategory_Slider%2Cimage_~L2FwaS9pbWFnZXMvNTIvdmFyaWFudHMvMzM1P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidmlzaW9uT1MiXX0%2Cp_Ii9saWJyYXJ5L3NsaWRlci9zbGlkZXItY29sb3Ii%2Cs_CnZfjVTjhhpXvwN2.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Slider Color | Explore SwiftUI" "twitter:description": "Customizing the color of the slider. Learn how to use Slider Color in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS." "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Slider%2BColor%2Cdescription_Customizing%2Bthe%2Bcolor%2Bof%2Bthe%2Bslider%2Ccategory_Slider%2Cimage_~L2FwaS9pbWFnZXMvNTIvdmFyaWFudHMvMzM1P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidmlzaW9uT1MiXX0%2Cp_Ii9saWJyYXJ5L3NsaWRlci9zbGlkZXItY29sb3Ii%2Cs_CnZfjVTjhhpXvwN2.png" "twitter:title": "Slider Color | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=52) # **Slider Color** Customizing the color of the slider ![Slider Color - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/52/variants/335?v=1790073478842&r=2&w=800&q=80&f=webp) ### **Platform Compatibility** iOS 15.0+ iPadOS 15.0+ macOS 12.0+ watchOS 8.0+ visionOS 1.0+ ### **Tags** ### **SwiftUI Code** [ Docs](https://developer.apple.com/documentation/swiftui/slider) ``` @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](https://exploreswiftui.com/_ipx/f_webp&q_80&s_48x48/images/connect-wizard-icon.png) **Connect Wizard** **Unlock insights App Store Connect doesn’t show you.** [** Get Started **](https://apps.apple.com/app/apple-store/id6747314580?pt=121213751&ct=Explore%20SwiftUI%20Banner&mt=8) ### **More Slider Components ** [**View all **](https://exploreswiftui.com/library/slider) ![SliderTickContentForEach - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/133/variants/379?v=1790073478842&r=2&w=412&q=75&f=webp) ### **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](https://exploreswiftui.com/api/images/86/variants/375?v=1790073478842&r=2&w=412&q=75&f=webp) ### **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](https://exploreswiftui.com/api/images/51/variants/396?v=1790073478842&r=2&w=412&q=75&f=webp) ### **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](https://exploreswiftui.com/api/images/50/variants/273?v=1790073478842&r=2&w=412&q=75&f=webp) ### **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](https://exploreswiftui.com/api/images/49/variants/249?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Slider** Creates a slider to select a value from a given range ### **Explore Other Components ** [**Browse all **](https://exploreswiftui.com/) ![Menu Action Button - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/23/variants/141?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Menu Action Button** Acts like a button and opens the menu on a secondary gesture ![Context Menu Preview - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/25/variants/159?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Context Menu Preview** A context menu with custom preview ![Swipe Action - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/200/variants/322?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Swipe Action** Adds custom swipe actions to a row in a list or container, notifying you when the actions are revealed or dismissed. ![Color Opacity - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/16/variants/124?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Color Opacity** The Color opacity modifier ![Hide Tab Bar On Scroll Down - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/88/variants/383?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Hide Tab Bar On Scroll Down** Minimize the tab bar when downwards scrolling starts. Minimizing is supported for tab bars on only iPhone ![Disable Sheet Dismiss Swipe - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/145/variants/486?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Disable Sheet Dismiss Swipe** Conditionally prevents interactive dismissal of presentations like popovers, sheets, and inspectors. Dragging the sheet is still possible to a limited extent, as shown in the screenshot, but it will never be dismissed. ![Preferred Top Column - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/256/variants/1967?v=1791379474964&r=2&w=412&q=75&f=webp) ### **Preferred Top Column** Controls which column appears on top of the stack when NavigationSplitView collapses into a single stack in certain contexts, such as on iPhone, when iPhone Duo is closed, or on Apple Watch. By default, the sidebar appears on top. In this case, the detail column does instead. ![TabView - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/155/variants/690?v=1790418883969&r=2&w=412&q=75&f=webp) ### **TabView** Creates Tabs with title, image, systemImage and custom Label. ```json {"@context":"https://schema.org","@graph":[{"@id":"https://exploreswiftui.com/#website","@type":"WebSite","description":"A visual library for SwiftUI APIs, components, and modifiers","inLanguage":"en-US","name":"Explore SwiftUI","url":"https://exploreswiftui.com/","publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/slider/slider-color#webpage","@type":"WebPage","dateModified":"2025-12-27T17:15:35.657Z","datePublished":"2025-06-04T09:54:19.285Z","description":"Customizing the color of the slider. Learn how to use Slider Color in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","name":"Slider Color","url":"https://exploreswiftui.com/library/slider/slider-color","breadcrumb":{"@id":"https://exploreswiftui.com/library/slider/slider-color#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/slider/slider-color"]}],"primaryImageOfPage":{"@id":"https://exploreswiftui.com/#logo"}},{"@id":"https://exploreswiftui.com/#identity","@type":"Organization","description":"A visual library for SwiftUI APIs, components, and modifiers","name":"Explore SwiftUI","url":"https://exploreswiftui.com","logo":{"@id":"https://exploreswiftui.com/#logo"},"sameAs":["https://x.com/Typ0genius","https://mastodon.social/@Typ0genius"]},{"@id":"https://exploreswiftui.com/library/slider/slider-color#article","dateModified":"2025-12-27T17:15:35.657Z","datePublished":"2025-06-04T09:54:19.285Z","description":"Customizing the color of the slider. Learn how to use Slider Color in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","headline":"Slider Color","inLanguage":"en-US","name":"Slider Color","thumbnailUrl":"https://exploreswiftui.com/api/images/52/variants/335?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/slider/slider-color","@type":["Article","TechArticle"],"about":{"@type":"Thing","name":"SwiftUI"},"author":{"@id":"https://exploreswiftui.com/#identity"},"image":{"@id":"https://exploreswiftui.com/#/schema/image/1"},"isPartOf":{"@type":"WebSite","name":"Explore SwiftUI","url":"https://exploreswiftui.com"},"mainEntityOfPage":{"@id":"https://exploreswiftui.com/library/slider/slider-color#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/slider/slider-color#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/slider","codeSampleType":"full example","description":"Customizing the color of the slider. Learn how to use Slider Color in SwiftUI with visual code examples for iOS, macOS, watchOS, tvOS, and visionOS.","name":"Slider Color SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"@State private var speed = 42.0\n@State private var isEditing = false\n\nvar body: some View {\n VStack {\n Slider(\n value: $speed,\n in: 0 ... 100,\n step: 2 // optional, by default 1,\n )\n Slider(\n value: $speed,\n in: 0 ... 100,\n step: 2 // optional, by default 1,\n\n ) {\n Text(\"Foo\") // for accessibility\n } minimumValueLabel: {\n Text(\"0\")\n } maximumValueLabel: {\n Text(\"100\")\n } onEditingChanged: { editing in\n isEditing = editing\n }\n }\n .tint(.red)\n}","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Slider"},{"@type":"Thing","name":"Slider Color"}]},{"@id":"https://exploreswiftui.com/library/slider/slider-color#breadcrumb","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","name":"Home","item":"https://exploreswiftui.com","position":1},{"@type":"ListItem","name":"Slider","item":"https://exploreswiftui.com/library/slider","position":2},{"@type":"ListItem","name":"Slider Color","item":"https://exploreswiftui.com/library/slider/slider-color","position":3}]},{"@id":"https://exploreswiftui.com/#logo","@type":"ImageObject","caption":"Explore SwiftUI","contentUrl":"https://exploreswiftui.com/apple-touch-icon.png","inLanguage":"en","url":"https://exploreswiftui.com/apple-touch-icon.png"},{"@id":"https://exploreswiftui.com/#/schema/image/1","@type":"ImageObject","contentUrl":"https://exploreswiftui.com/api/images/52/variants/335?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/52/variants/335?v=1790073478842&r=2"}]} ```