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

Overview

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, [email protected]

License

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

Comments
  • Setting MinimumValue Causes Thumb to Jump when Touched

    Setting MinimumValue Causes Thumb to Jump when Touched

    First of all, great little library you have here. Works great! :)

    I'm using the RangeSlider and have set the minimumValue to 5 and the maximumValue to 30.

    When I touch on one of the thumbs it jumps forward by 5 (the minimumValue). A quick fix I did was to change the delta function in CircularSliderHelper.swift. Instead of...

    return scaleValue(deltaAngle, fromInterval: angleIntreval, toInterval: interval);

    I changed it to...

    let scaledValue = scaleValue(deltaAngle, fromInterval: angleIntreval, toInterval: interval) - interval.min;
    		
    return scaledValue;
    

    This seems to have solved the problem. I'm not sure if this is the best place to put this or if it should've been in the ScaleValue function?

    bug 
    opened by Etep15 6
  • Help: 12 Hours clock with AM/PM support

    Help: 12 Hours clock with AM/PM support

    Hello @HamzaGhazouani,

    Thank you for sharing your work. I am using this control in an app. The feature requires to show 12 hours clock (like regular wall clock) but the user can opt AM/PM. Like user can choose to sleep from 10 PM to 6 AM or 10 AM to 6 PM.

    Can you please give me an insight n how to do this? Your help is very much appreciated. TIA :)

    enhancement 
    opened by AnnieNinaJoyceV 5
  • Crash suddenly on assertion!

    Crash suddenly on assertion!

    I am using this slider on a player and its working fine . but some time its automatically become crash and i am getting the reason in the console that assertion failed: Illegal interval: file /Users/sabakuch/Documents/Ravi/SlideMenu/Pods/HGCircularSlider/HGCircularSlider/Classes/CircularSliderHelper.swift, line 17

    on line no 17 when i check assert(min <= max, NSLocalizedString("Illegal interval", comment: ""))

    screen shot 2017-01-04 at 5 00 29 pm

    question 
    opened by Raviojha62 5
  • Setting end point value to max value causes track to reset to unfilled

    Setting end point value to max value causes track to reset to unfilled

    When you set the end point to the max value the track resets to the zero state. Expected behavior would be for the track to be fully filled in to match 100% completed.

    I looked at the source briefly and in the scaleValue function there is some division that is returning 0 when the value should be 1 which may be causing the problem

    opened by jessemx109 4
  • Wake up, bedtime images not rounded.

    Wake up, bedtime images not rounded.

    Hi,

    I wonder what I miss with the setup. I've already tried to search at Stack Overflow, yet I haven't seen a related issue or answer to the problem.

    Currently using xCode8.1\Swift 3

    I have the following line of codes, circularSlider is an outlet.

    override func viewDidLoad() { super.viewDidLoad() self.setUpCircularSlider() self.onValueChangeUpdateData(self.circularSlider) }

    fileprivate func setUpCircularSlider(){ self.circularSlider.startThumbImage = UIImage(named: "bedTime") self.circularSlider.endThumbImage = UIImage(named: "wakeUp") let dayInSeconds = 24 * 60 * 60 self.circularSlider.maximumValue = CGFloat(dayInSeconds) self.circularSlider.startPointValue = CGFloat(1 * 60 * 60) self.circularSlider.endPointValue = CGFloat(8 * 60 * 60)
    }

    Having the following runtime attributes:

    screen shot 2016-12-19 at 11 40 14 pm

    This is the result: screen shot 2016-12-19 at 11 31 04 pm

    Notice the image, it doesn't look good.

    Any input will be greatly appreciated.

    Thank you.

    Regards, Jun

    question 
    opened by asteriomanet 4
  • Make CGLineCap as property

    Make CGLineCap as property

    Hi, would it be possible to make CGLineCap available to set and make it for example square? I know I should probably make pull request but I am not good at this. I think it's easy to change and I would very much like it. Thanks

    opened by LiborZa 3
  • open some function to allow override newValue method

    open some function to allow override newValue method

    Allow override this method:

    CircularSlider.newValue(from oldValue: CGFloat, touch touchPosition: CGPoint, start startPosition: CGPoint) -> CGFloat
    

    (#line 302 in CircularSlider.swift)

    opened by huuthanhla 2
  • Error:

    Error: "Failed to render and update auto layout status..."

    Following the setup instructions produces the result "Failed to render and update auto layout status..." when I try to change the class of a View to "Circular Slider" or any of the others provided. Running OS 10.12.6. The circular slider does not appear and indeed no functionality seems to work.

    opened by mattHorrigan 2
  • thumb slider freezes or touches at outside of round slider thumb control automatically

    thumb slider freezes or touches at outside of round slider thumb control automatically

    Hey,

    Could you please give me a hint how to fix following problem:

    when tap on the slider thump it freezes and doesn't move or seems like thumb control is not on the round thumb itself, because it slides to the side

    thanks

    opened by alexgofman 2
  • 'M_PI' is deprecated in Xcode 8.3

    'M_PI' is deprecated in Xcode 8.3

    Using Xcode 8.3, I have several swift compiler warnings : 'M_PI' is deprecated: Please use 'Double.pi' or '.pi' to get the value of correct type and avoid casting.

    opened by wasappi 2
  • Can't customize slider with code.

    Can't customize slider with code.

    I'm having a weird issue that I don't know how to fix.

    I dragged a view through storyboard and changed its class to CircularView. In code, I'm setting the numberOfRounds property as so:

    circularSlider.numberOfRounds = 1

    My app crashes with EXC_BAD_ACCESS.

    I don't see anything strange in the definition of the method in the source code, so I don't know why this isn't working. If I customize the view via Interface Builder, nothing shows up.

    I installed the dependency with CocoaPods. Currently using v2.2.0.

    Trying to debug the app:

    (lldb) po circularSlider
    β–Ώ Optional<CircularSlider>
      - some : <UIView: 0x7fbae370a270; frame = (82 146; 250 250); autoresize = RM+BM; layer = <CALayer: 0x600003d0ef80>>
    
    (lldb) po circularSlider.numberOfRounds
    error: Execution was interrupted, reason: EXC_BAD_INSTRUCTION (code=EXC_I386_INVOP, subcode=0x0).
    The process has been returned to the state before expression evaluation.
    (lldb) 
    

    And again, the numberOfRows property is not even set as an optional in the source code, so I don't think it's crashing due to it being nil? I'm very dumbfounded with this problem.

    opened by AndyIbanez 1
  • Swipe down gesture in modal window

    Swipe down gesture in modal window

    If UIViewController is in 'segue kind - present modally' mode (ios 13) the slider stops working because a gesture that closes the modal window (swipe down) is recognized

    opened by rafalmodrzynski 2
  • Could you raise the supported deployment target versions for SPM?

    Could you raise the supported deployment target versions for SPM?

    */SourcePackages/checkouts/HGCircularSlider/Package.swift The iOS deployment target 'IPHONEOS_DEPLOYMENT_TARGET' is set to 8.0, but the range of supported deployment target versions is 9.0 to 14.5.99.

    opened by Desmuz 0
  • Slider doesn't move smoothly on modal view controller

    Slider doesn't move smoothly on modal view controller

    I added slider on View controller. And I opened this controller with modalTransitionstyle (coververtical) from other controller. But I can't move slider smoothly. Anyone can help this? Thank you.

    opened by instastoreaj 1
Releases(2.2.1)
Owner
Hamza Ghazouani
Hamza Ghazouani
Circular progress indicator for your macOS app

CircularProgress Circular progress indicator for your macOS app This package is used in production by apps like Gifski and HEIC Converter. Requirement

Sindre Sorhus 520 Jan 3, 2023
iOS 11 Control Center Slider

SectionedSlider Control Center Slider Requirements Installation Usage License Requirements iOS 8.0+ Swift 3.0+ Xcode 8.0+ Installation CocoaPods Cocoa

Leonardo Cardoso 361 Dec 3, 2022
Declarative, configurable & highly reusable UI development as making Lego bricks.

LeeGo is a lightweight Swift framework that helps you decouple & modularise your UI component into small pieces of LEGO style's bricks, to make UI dev

WANG Shengjia 969 Dec 29, 2022
SwiftUI components and extensions that seem to be highly reusable

SwiftUI components and extensions that seem to be highly reusable

Yusuke Hosonuma 56 Dec 15, 2022
:octocat:πŸ’§ A slider widget with a popup bubble displaying the precise value selected. Swift UI library made by @Ramotion

FLUID SLIDER A slider widget with a popup bubble displaying the precise value selected written on Swift. We specialize in the designing and coding of

Ramotion 1.9k Dec 23, 2022
RangeSeedSlider provides a customizable range slider like a UISlider.

RangeSeekSlider Overview RangeSeekSlider provides a customizable range slider like a UISlider. This library is based on TomThorpe/TTRangeSlider (Objec

WorldDownTown 644 Dec 12, 2022
Progress and Activity Indicators for iOS apps

Progress Indicators and Activity Views for iOS Apps Features Storyboard compatible, configure apprearance with the property inspector. fully animated,

Alexander Kasimir 101 Nov 13, 2022
Show progress in your app's Dock icon

DockProgress Show progress in your app's Dock icon This package is used in production by the Gifski app. You might also like some of my other apps. Re

Sindre Sorhus 958 Jan 2, 2023
πŸ“Š A customizable gradient progress bar (UIProgressView).

GradientProgressBar A customizable gradient progress bar (UIProgressView). Inspired by iOS 7 Progress Bar from Codepen. Example To run the example pro

Felix M. 490 Dec 16, 2022
πŸ’ˆ Retro looking progress bar straight from the 90s

Description Do you miss the 90s? We know you do. Dial-up internet, flickering screens, brightly colored websites and, of course, this annoyingly slow

HyperRedink 18 Nov 24, 2022
Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView.

StepProgressView Step-by-step progress view with labels and shapes. A good replacement for UIActivityIndicatorView and UIProgressView. Usage let progr

Yonat Sharon 340 Dec 16, 2022
Work in progress gallery of controls available to Catalyst apps using Optimized for Mac

Catalyst Controls Gallery Very simple work-in-progress demonstration of many common controls available to Mac Catalyst as of macOS 11. Provided moreso

Steven Troughton-Smith 163 Sep 18, 2022
Snapchat / Instagram Stories like progress indicator

SegmentedProgressBar A simple little control that animates segments like Snapchat or Instagram Stories. Requirements iOS 8.0+ Xcode 8 Installation Dra

Dylan Marriott 442 Dec 25, 2022
Measuring the progress with annotations πŸ”±

Description Displaying the progress in a meter control. ProgressMeter lets you create your custom annotations that display either on top or bottom of

Khawaja Farooq 108 Oct 5, 2022
A dynamically flowing progress bar.

WWProgressView A dynamically flowing progress bar. δΈ€ε€‹ε‹•ζ…‹ζ΅ε‹•ηš„ι€²εΊ¦ζ’. Installation with Swift Package Manager dependencies: [ .package(url: "https://gith

William-Weng 5 Jan 25, 2022
Whole, half or floating point ratings control written in Swift

FloatRatingView A simple rating view for iOS written in Swift! Supports whole, half or floating point values. I couldn't find anything that easily set

Glen Yi 546 Dec 8, 2022
Fully customizable Facebook reactions like control

Reactions is a fully customizable control to give people more ways to share their reaction in a quick and easy way. Requirements β€’ Usage β€’ Installatio

Yannick Loriot 585 Dec 28, 2022
A page control similar to that used in Instagram

ISPageControl ISPageControl has a page control similar to that used in the Instagram Contents Requirements Installation Usage Communication Credits Li

Interactive 291 Dec 5, 2022
A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView and iPhone X safe area support for content reloading. Built for iOS 10 and later.

Arale A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView support for reloading your content. Built f

Putra Z. 43 Feb 4, 2022