Your First iOS and SwiftUI App: Polishing the App, Custom Slider Button Challenge

Hi,
In this lesson, In the Figma file, the slider’s button is custom.
How can I do it?
Guess I need to create a UISlider custom UI.

Hi and welcome to the community @serdarkaracay! It’s definitely possible to create a custom slider. Are you looking for tutorials and or suggestions for creating one using SwiftUI?

Best,
Gina

Thanks, @gdelarosa. Yes, I have been researching how to?
There are many ways to do this.
For example; zstack > capsule > circle + gesture or UISlider.
SwiftUI Slider, I want to access the thumb button.
How to accessible?

@serdarkaracay, could you elaborate more on the thumb button please? I’m not sure what you mean by that. Are you referring to this part of the tutorial? https://www.raywenderlich.com/4919757-your-first-ios-and-swiftui-app/lessons/43

Best,
Gina

Thank you so very much. Yes, I know this part of the tutorial.
May looks tutorial this to link
Your First iOS and SwiftUI App: Polishing the App | raywenderlich.com in material Figma file.

Slider’s thumb button custom circle. I want to make this, just with SwiftUI.

Thank you.

@serdarkaracay Thank you for sharing the link and Figma file, it’s super helpful for me to have a better understanding. I’m not certain after all as to how one would change the thumb image with SwiftUI so I apologize for any miscommunication previously. This resource here gives sample code for changing at least the color and size of the thumb button. SwiftUI Sliders with custom styles for iOS. There is also a Github repository that might have a solution: GitHub - kieranb662/Sliders-SwiftUI: Collection of unique fully customizable SwiftUI sliders, joysticks, trackpads and more!. I also checked out the documentation on Apple’s site and they didn’t mention being able to change the thumb image in SwiftUI. Apple Developer Documentation. For now, it doesn’t seem possible to change the thumb image in SwiftUI. Hope this clears things up for you.

Best,
Gina

Thank you @gdelarosa. I fixed it with Circle.

1 Like

This topic was automatically closed after 166 days. New replies are no longer allowed.