CircularSlider

spm spm

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

Features

  • ? Customizable colors
  • ? Customizable size
  • ? Customizable font
  • ? 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

struct ContentView: View {
    @State var value = 50.0

    var body: some View {
        VStack {
            CircularSlider(currentValue: $value)
        }
    }
}

Fancy Example

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…

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 for details

GitHub

View Github