https://github.com/terlan98/circularslider
A SwiftUI view that can be interacted with by dragging a knob over a circular path to select a value
https://github.com/terlan98/circularslider
circular ios package slider swift swiftui
Last synced: 8 months ago
JSON representation
A SwiftUI view that can be interacted with by dragging a knob over a circular path to select a value
- Host: GitHub
- URL: https://github.com/terlan98/circularslider
- Owner: terlan98
- License: mit
- Created: 2022-08-29T08:33:17.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-09T17:40:42.000Z (over 2 years ago)
- Last Synced: 2025-09-28T02:23:51.451Z (9 months ago)
- Topics: circular, ios, package, slider, swift, swiftui
- Language: Swift
- Homepage:
- Size: 362 KB
- Stars: 28
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# CircularSlider
A view that can be interacted with by dragging a knob over a circular path to select a value
## Features
- [x] 🌈 Customizable colors
- [x] 📐 Customizable size
- [x] 🔠 Customizable font
- [x] 🏷 Customizable text with prefix and suffix
## 🛠 How do I install it?
You can install `CircularSlider` by going to your Project settings > Swift Packages and add the repository by providing the GitHub URL. Alternatively, you can go to File > Swift Packages > Add Package Dependencies...
## 🚀 How do I use it?
### Simple Example
```swift
struct ContentView: View {
@State var value = 50.0
var body: some View {
VStack {
CircularSlider(currentValue: $value)
}
}
}
```
----
### Fancy Example
```swift
struct ContentView: View {
@State var value = 25.0
var body: some View {
VStack {
CircularSlider(currentValue: $value,
minValue: 1,
maxValue: 30,
knobColor: .orange,
progressLineColor: .orange,
font: .custom("HelveticaNeue-Light", size: 35),
backgroundColor: .gray.opacity(0.05),
currentValueSuffix: "$")
}
}
}
```
----
### Even Fancier Example...
```swift
struct ContentView: View {
@State var value = 50.0
var body: some View {
VStack {
CircularSlider(currentValue: $value,
minValue: 1,
maxValue: 60,
knobColor: .init(red: 0.5, green: 0.5, blue: 0.5),
progressLineColor: .init(red: 0.84, green: 0.93, blue: 0.09),
font: .custom("HelveticaNeue-Light", size: 35),
backgroundColor: .yellow.opacity(0.09),
currentValueSuffix: " min")
}
}
}
```
# License
CircularSlider is released under the MIT license. See [LICENSE](https://github.com/terlan98/CircularSlider/blob/main/LICENSE) for details.
