--- title: "Custom Slider Ticks | Explore SwiftUI" description: "Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks" canonical_url: "https://exploreswiftui.com/library/slider/custom-slider-ticks" meta: author: "Explore SwiftUI" "og:description": "Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks" "og:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Custom%2BSlider%2BTicks%2Cdescription_~Q3JlYXRlcyBhIHNsaWRlciB0byBzZWxlY3QgYSB2YWx1ZSBmcm9tIGEgZ2l2ZW4gcmFuZ2UsIHN1YmplY3QgdG8gYSBzdGVwIGluY3JlbWVudCwgd2hpY2ggZGlzcGxheXMgdGhlIHByb3ZpZGVkIGxhYmVscyBhbmQgY3VzdG9taXphYmxlIHRpY2tzLg%2Ccategory_Slider%2Cimage_~L2FwaS9pbWFnZXMvODYvdmFyaWFudHMvMzc1P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidmlzaW9uT1MiXX0%2Cp_Ii9saWJyYXJ5L3NsaWRlci9jdXN0b20tc2xpZGVyLXRpY2tzIg%2Cs_xdhf9O2e8eyEYb6N.png" "og:image:height": "630" "og:image:type": image/png "og:image:width": "1200" "og:title": "Custom Slider Ticks | Explore SwiftUI" "twitter:description": "Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks" "twitter:image": "https://exploreswiftui.com/_og/d/c_Component%2Ctitle_Custom%2BSlider%2BTicks%2Cdescription_~Q3JlYXRlcyBhIHNsaWRlciB0byBzZWxlY3QgYSB2YWx1ZSBmcm9tIGEgZ2l2ZW4gcmFuZ2UsIHN1YmplY3QgdG8gYSBzdGVwIGluY3JlbWVudCwgd2hpY2ggZGlzcGxheXMgdGhlIHByb3ZpZGVkIGxhYmVscyBhbmQgY3VzdG9taXphYmxlIHRpY2tzLg%2Ccategory_Slider%2Cimage_~L2FwaS9pbWFnZXMvODYvdmFyaWFudHMvMzc1P3Y9MTc5MDA3MzQ3ODg0MiZyPTImdz0xMjgwJnE9ODUmZj1qcGVn%2CimageMode_crop%2CimagePosition_center%2CimageFrame_~cG9zaXRpb246IGFic29sdXRlOyByaWdodDogMDsgd2lkdGg6IDY0MHB4OyBoZWlnaHQ6IDQ4MHB4OyBkaXNwbGF5OiBmbGV4OyBvdmVyZmxvdzogaGlkZGVuOyBiYWNrZ3JvdW5kOiAjRkZGRkZGOyBib3gtc2hhZG93OiAwIC0xMHB4IDUwcHggcmdiYSgzNyw5OSwyMzUsMC4xOCk7IGJvcmRlci1sZWZ0OiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgdG9wOiA3NXB4OyBib3JkZXItdG9wOiAxcHggc29saWQgcmdiYSgwLDAsMCwwLjA2KTsgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkIHJnYmEoMCwwLDAsMC4wNik7IGJvcmRlci10b3AtbGVmdC1yYWRpdXM6IDMycHg7IGJvcmRlci1ib3R0b20tbGVmdC1yYWRpdXM6IDMycHg7%2Cprops_eyJwbGF0Zm9ybXMiOlsiaU9TIiwiaVBhZE9TIiwibWFjT1MiLCJ3YXRjaE9TIiwidmlzaW9uT1MiXX0%2Cp_Ii9saWJyYXJ5L3NsaWRlci9jdXN0b20tc2xpZGVyLXRpY2tzIg%2Cs_xdhf9O2e8eyEYb6N.png" "twitter:title": "Custom Slider Ticks | Explore SwiftUI" --- > Index of every page on this site: [llms.txt](https://exploreswiftui.com/llms.txt) **Interactive previews**[ iPhone](https://exploreswiftui.com/iphone?element=86) # **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. ![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=800&q=80&f=webp) ### **Platform Compatibility** iOS 26.0+ iPadOS 26.0+ macOS 26.0+ watchOS 26.0+ visionOS 26.0+ ### **Tags** ### **SwiftUI Code** [ Docs]() ``` @State private var speed = 42.0 var body: some View { Slider(value: $speed) { Text("Foo") } ticks: { SliderTick(0.2) SliderTick(0.6) SliderTick(0.8) } } ``` ### **Found an issue or have a suggestion?** Created: June 10, 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. ![Slider Color - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/52/variants/335?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Slider Color** Customizing the color of the slider ![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/) ![Item Sheet - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/136/variants/448?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Item Sheet** Presents a sheet using the given item as a data source for the sheet’s content. On watchOS, sheets are displayed as fullScreenCover. ![TabSection - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/157/variants/618?v=1790073478842&r=2&w=412&q=75&f=webp) ### **TabSection** A container that you can use to add hierarchy within a tab view. ![DatePicker - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/58/variants/114?v=1790073478842&r=2&w=412&q=75&f=webp) ### **DatePicker** Creates an instance that selects a Date with an unbounded range ![CircularProgressViewStyle - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/80/variants/86?v=1790073478842&r=2&w=412&q=75&f=webp) ### **CircularProgressViewStyle** The style of a progress view that uses a circular gauge to indicate the partial completion of an activity ![Color Variants - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/9/variants/209?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Color Variants** HierarchicalShapeStyle, a shape style that maps to one of the numbered content styles ![Background Extension Effect - iPadOS - Landscape - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/91/variants/422?v=1790073478842&r=2&w=412&q=75&f=webp) ### **Background Extension Effect** Adds the background extension effect to the view. The view will be duplicated into mirrored copies which will be placed around the view on any edge with available safe area. Additionally, a blur effect will be applied on top to blur out the copies ![TextFieldLink - iOS on iPhone - Portrait - Flat Design - Light Mode - Preview](https://exploreswiftui.com/api/images/76/variants/192?v=1790073478842&r=2&w=412&q=75&f=webp) ### **TextFieldLink** A control that requests text input from the user when pressed ![DatePicker Colors - iOS on iPhone - Portrait - Liquid Glass - Light Mode - Preview](https://exploreswiftui.com/api/images/66/variants/245?v=1790073478842&r=2&w=412&q=75&f=webp) ### **DatePicker Colors** Customizing the colors of the date picker ```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/custom-slider-ticks#webpage","@type":"WebPage","dateModified":"2025-12-27T10:04:15.646Z","datePublished":"2025-06-10T09:26:41.320Z","description":"Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks","name":"Custom Slider Ticks","url":"https://exploreswiftui.com/library/slider/custom-slider-ticks","breadcrumb":{"@id":"https://exploreswiftui.com/library/slider/custom-slider-ticks#breadcrumb"},"isPartOf":{"@id":"https://exploreswiftui.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://exploreswiftui.com/library/slider/custom-slider-ticks"]}],"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/custom-slider-ticks#article","dateModified":"2025-12-27T10:04:15.646Z","datePublished":"2025-06-10T09:26:41.320Z","description":"Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks","headline":"Custom Slider Ticks","inLanguage":"en-US","name":"Custom Slider Ticks","thumbnailUrl":"https://exploreswiftui.com/api/images/86/variants/375?v=1790073478842&r=2","url":"https://exploreswiftui.com/library/slider/custom-slider-ticks","@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/custom-slider-ticks#webpage"},"publisher":{"@id":"https://exploreswiftui.com/#identity"}},{"@id":"https://exploreswiftui.com/library/slider/custom-slider-ticks#/schema/software-source-code/1","@type":"SoftwareSourceCode","codeRepository":"https://developer.apple.com/documentation/swiftui/slider/init(value:in:step:neutralvalue:enabledbounds:label:currentvaluelabel:minimumvaluelabel:maximumvaluelabel:tick:oneditingchanged:)","codeSampleType":"full example","description":"Creates a slider to select a value from a given range, subject to a step increment, which displays the provided labels and customizable ticks","name":"Custom Slider Ticks SwiftUI Example","programmingLanguage":"Swift","runtimePlatform":"SwiftUI","text":"@State private var speed = 42.0\n \nvar body: some View {\n Slider(value: $speed) {\n Text(\"Foo\")\n } ticks: {\n SliderTick(0.2)\n SliderTick(0.6)\n SliderTick(0.8)\n }\n }","about":[{"@type":"Thing","name":"SwiftUI"},{"@type":"Thing","name":"Slider"},{"@type":"Thing","name":"Custom Slider Ticks"}]},{"@id":"https://exploreswiftui.com/library/slider/custom-slider-ticks#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":"Custom Slider Ticks","item":"https://exploreswiftui.com/library/slider/custom-slider-ticks","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/86/variants/375?v=1790073478842&r=2","inLanguage":"en","url":"https://exploreswiftui.com/api/images/86/variants/375?v=1790073478842&r=2"}]} ```