Convert Figma logo to code with AI

HamzaGhazouani logoHGCircularSlider

A custom reusable circular / progress slider control for iOS application.

2,583
276
2,583
23

Top Related Projects

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

Quick Overview

HGCircularSlider is a highly customizable circular slider control for iOS applications. It provides a visually appealing and interactive way to display and manipulate values within a circular interface.

Pros

  • Customizable Appearance: The library offers a wide range of customization options, allowing developers to adjust the slider's size, color, and other visual properties to match the design of their application.
  • Smooth Interaction: The circular slider provides a smooth and responsive user experience, with seamless value changes and intuitive touch interactions.
  • Flexible Value Range: The slider can be configured to work with various value ranges, making it suitable for a wide range of use cases.
  • Accessibility Support: The library includes accessibility features, ensuring that the circular slider can be used by users with disabilities.

Cons

  • Limited Platform Support: The library is currently only available for iOS, and there is no support for other platforms such as Android or web.
  • Dependency on UIKit: The library is built on top of UIKit, which may limit its compatibility with newer technologies or frameworks that use a different UI architecture.
  • Potential Performance Issues: Depending on the complexity of the application and the number of circular sliders used, the library may have performance implications, especially on older or less powerful devices.
  • Lack of Detailed Documentation: While the library provides some documentation, it may not be as comprehensive as some developers would prefer, making it more challenging to get started or troubleshoot issues.

Code Examples

Creating a Basic Circular Slider

let circularSlider = HGCircularSlider()
circularSlider.frame = CGRect(x: 50, y: 50, width: 200, height: 200)
circularSlider.minimumValue = 0
circularSlider.maximumValue = 100
circularSlider.value = 50
circularSlider.addTarget(self, action: #selector(valueChanged(_:)), for: .valueChanged)
view.addSubview(circularSlider)

@objc func valueChanged(_ slider: HGCircularSlider) {
    print("Value changed: \(slider.value)")
}

Customizing the Circular Slider Appearance

let circularSlider = HGCircularSlider()
circularSlider.frame = CGRect(x: 50, y: 50, width: 200, height: 200)
circularSlider.minimumValue = 0
circularSlider.maximumValue = 100
circularSlider.value = 50
circularSlider.trackColor = .lightGray
circularSlider.progressColor = .blue
circularSlider.thumbColor = .white
circularSlider.thumbBorderColor = .blue
circularSlider.thumbBorderWidth = 2
circularSlider.addTarget(self, action: #selector(valueChanged(_:)), for: .valueChanged)
view.addSubview(circularSlider)

Handling Accessibility

let circularSlider = HGCircularSlider()
circularSlider.frame = CGRect(x: 50, y: 50, width: 200, height: 200)
circularSlider.minimumValue = 0
circularSlider.maximumValue = 100
circularSlider.value = 50
circularSlider.isAccessibilityElement = true
circularSlider.accessibilityLabel = "Volume slider"
circularSlider.accessibilityHint = "Adjust the volume by sliding the thumb"
circularSlider.addTarget(self, action: #selector(valueChanged(_:)), for: .valueChanged)
view.addSubview(circularSlider)

Getting Started

To get started with HGCircularSlider, follow these steps:

  1. Add the HGCircularSlider library to your project. You can do this by using a package manager like CocoaPods or Carthage, or by manually adding the source files to your project.

  2. Import the HGCircularSlider library in your Swift file:

import HGCircularSlider
  1. Create an instance of the HGCircularSlider class and customize its properties as needed:

Competitor Comparisons

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Swift UI library made by @Ramotion

Pros of Circle Menu

  • Circle Menu provides a visually appealing and interactive circular menu interface, which can be a unique and engaging UI element for certain applications.
  • The library includes various customization options, allowing developers to adjust the appearance and behavior of the circular menu to fit their specific design requirements.
  • Circle Menu is well-documented and includes detailed examples, making it easier for developers to integrate and use the library in their projects.

Cons of Circle Menu

  • Compared to HGCircularSlider, Circle Menu is a more specialized and complex library, which may require more effort to integrate and configure for certain use cases.
  • The circular menu layout may not be the most suitable or intuitive interface for all types of applications, and developers should carefully consider whether it aligns with their user experience goals.
  • The library may have a larger footprint and dependencies compared to a more focused slider component like HGCircularSlider.

Code Comparison

Here's a brief comparison of the code for creating a basic circular menu using Circle Menu and a circular slider using HGCircularSlider:

Circle Menu:

let circleMenu = CircleMenu(
    frame: view.bounds,
    buttonSize: 50,
    startAngle: -90,
    menuOptions: [
        CircleMenuOption(image: UIImage(named: "option1")!),
        CircleMenuOption(image: UIImage(named: "option2")!),
        CircleMenuOption(image: UIImage(named: "option3")!)
    ]
)
view.addSubview(circleMenu)

HGCircularSlider:

let circularSlider = HGCircularSlider(frame: view.bounds)
circularSlider.minimumValue = 0
circularSlider.maximumValue = 100
circularSlider.value = 50
circularSlider.trackColor = .lightGray
circularSlider.progressColor = .blue
view.addSubview(circularSlider)

As you can see, the code for setting up a basic circular menu with Circle Menu is more involved, as it requires defining the menu options and their properties, while the HGCircularSlider has a simpler API for creating a basic circular slider.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

HGCircularSlider

Backers on Open Collective Sponsors on Open Collective Twitter: @GhazouaniHamza CI Status Version License Language Platform Carthage compatible

codebeat badge Documentation Readme Score

Example

To run the example project, clone the repo, and run pod install from the Example directory first.

You also may like

  • HGPlaceholders - Nice library to show placeholders for any UITableView in your project
  • HGRippleRadarView - A beautiful radar view to show nearby users with ripple animation, fully customizable

Requirements

  • iOS 9.0+
  • Xcode 11.4

Installation

HGCircularSlider is also available through Swift Package Manager

Follow this doc.

HGCircularSlider is also available through CocoaPods. To install it, simply add the following line to your Podfile:

pod 'HGCircularSlider', '~> 2.2.1'

HGCircularSlider is also available through Carthage. To install it, simply add the following line to your Cartfile:

github "HamzaGhazouani/HGCircularSlider"

Usage

  1. Change the class of a view from UIView to CircularSlider, RangeCircularSlider or MidPointCircularSlider
  2. Programmatically:
let circularSlider = CircularSlider(frame: myFrame)
circularSlider.minimumValue = 0.0
circularSlider.maximumValue = 1.0
circularSlider.endPointValue = 0.2

OR

let circularSlider = RangeCircularSlider(frame: myFrame)
circularSlider.startThumbImage = UIImage(named: "Bedtime")
circularSlider.endThumbImage = UIImage(named: "Wake")

let dayInSeconds = 24 * 60 * 60
circularSlider.maximumValue = CGFloat(dayInSeconds)

circularSlider.startPointValue = 1 * 60 * 60
circularSlider.endPointValue = 8 * 60 * 60
circularSlider.numberOfRounds = 2 // Two rotations for full 24h range

OR

let circularSlider = MidPointCircularSlider(frame: myFrame)
circularSlider.minimumValue = 0.0
circularSlider.maximumValue = 10.0
circularSlider.distance = 1.0
circularSlider.midPointValue = 5.0
If you would like to use it like a progress view
let progressView = CircularSlider(frame: myFrame)
progressView.minimumValue = 0.0
progressView.maximumValue = 1.0
progressView.endPointValue = 0.2 // the progress 
progressView.userInteractionEnabled = false 
// to remove padding, for more details see issue #25
progressView.thumbLineWidth = 0.0
progressView.thumbRadius = 0.0

Documentation

Full documentation is available on CocoaDocs.
You can also install documentation locally using jazzy.

References

The UI examples of the demo project inspired from Dribbble.

Player
BasicExample
OClock

The project is Inspired by UICircularSlider

Author

Hamza Ghazouani, hamza.ghazouani@gmail.com

License

HGCircularSlider is available under the MIT license. See the LICENSE file for more info.