HGCircularSlider: A Novel Tool for Circular Slider Implementations in iOS Applications

Robert Harris -

Engaging user interfaces are the hallmark of successful mobile applications. Among the myriad of UI components, sliders play a pivotal role in capturing user inputs in a seamless and interactive manner. The hgcircularslider, an open-source library crafted meticulously by Hamza Ghazouani, elevates the slider experience by introducing a circular design. Tailored for iOS applications and built on the robust framework of SwiftUI, this library is a blend of aesthetics and simplicity.

Core Features:

  1. Versatile Styles: The hgcircularslider library offers an array of styles catering to diverse aesthetic preferences.
  2. Customizable Attributes: Tailor the circular slider attributes to align with the application’s theme effortlessly.

Getting started with hgcircularslider is a breeze. Import the module into your iOS project, and you are all set to enrich your application with circular sliders:

import SwiftUI
import hgcircularslider

struct ContentView: View {
    @State var value: Double = 0.5
    
    var body: some View {
        // Default style circular slider
        HGCircularSlider(value: $value)
        
        // Custom style circular slider
        HGCircularSlider(
            value: $value,
            style: .custom(
                backgroundColor: Color.red,
                fillColor: Color.green,
                thumbColor: Color.blue,
                thumbSize: 100,
            )
        )
    }
}

Additional functionalities add more feathers to its cap:

  • MinMax Values: Set the minimum and maximum limits to control the slider’s range.
  • Tick Mark Intervals: Define major and minor tick intervals to render a graduated slider.
// Setting MinMax values
HGCircularSlider(
    value: $value,
    maxValue: 100,
    minValue: 0,
)

// Setting tick intervals
HGCircularSlider(
    value: $value,
    majorTickInterval: 25,
    minorTickInterval: 10,
)

Moreover, the library facilitates fetching the current slider value, listening for value changes, and handling tap events on the slider with SwiftUI’s onAppear(), onChange(), and onTap() methods respectively:

// Code snippets showcasing the mentioned functionalities