Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 3 months ago
JSON representation

A SwiftUI view that can be interacted with by dragging a knob over a circular path to select a value

Awesome Lists containing this project

README

        

# CircularSlider
![spm](https://img.shields.io/badge/SwiftPM-compatible-brightgreen?style=flat-square&logo=swift)
![spm](https://img.shields.io/github/license/terlan98/CircularSlider?style=flat-square)

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.

Buy Me A Coffee