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
A feature-rich circular slider control written in Swift.

MTCircularSlider Screenshot Usage To run the example project, clone the repo, and run pod install from the Example directory first. Requirements iOS 1

Eran Boudjnah 132 Jan 1, 2023
A reusable Slider View made with SwiftUI

ZSlider A reusable Slider View made with SwiftUI. Installation: Minimum version iOS 13 In Xcode go to File -> Swift Packages -> Add Package Dependency

null 7 Dec 15, 2022
VolumeControl is a custom volume control for iPhone featuring a well-designed round slider.

#VolumeControl VolumeControl is a custom volume control for iPhone featuring a well-designed round slider. Preview Usage // Include VolumeControl.h in

12Rockets 81 Oct 11, 2022
CircleSlider is a Circular slider library. written in pure Swift.

CircleSlider Description and appetize.io`s DEMO Usage To run the example project, clone the repo, and run pod install from the Example directory first

Nobuyasu 142 May 9, 2022
A powerful Circular Slider. It's written in Swift, it's 100% IBDesignable and all parameters are IBInspectable.

CircularSlider A powerful Circular Slider. It's written in Swift, it's 100% IBDesignable and all parameters are IBInspectable. Demo Installation Circu

Matteo Tagliafico 253 Sep 19, 2022
PhotoSlider is a simple photo slider and can delete slider with swiping.

PhotoSlider is a simple photo slider and can delete slider with swiping.

Daichi Nakajima 247 Nov 30, 2022
This is an iOS Tweak that modifies the brightness slider in the Control Center.

AdvancedBrightnessSlider Tweak This is an iOS Tweak that modifies the brightness slider in the Control Center. Even with dark mode toggled on, I found

Jonas Schiefner 18 Jan 5, 2023
A beautiful slider control for iOS built purely upon Swift

SnappingSlider A beautiful slider control for iOS. Installation There are two ways to add the control to your project; you can add it as a submodule i

Rehat Kathuria 577 Dec 15, 2022
VerticalSlider is a vertical slider control for iOS in Swift.

?? VerticalSlider If you like VerticalSlider, give it a ★ at the top right of this page. Overview VerticalSlider is a vertical implementation of the U

Jon Kent 78 Sep 15, 2022
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
Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle!

iLabeledSeekSlider Custom & highly configurable seek slider with sliding intervals, disabled state and every possible setting to tackle! Minimum iOS v

Edgar Žigis 9 Aug 16, 2022
StepSlider its custom implementation of slider such as UISlider for preset integer values.

StepSlider StepSlider its custom implementation of slider such as UISlider for preset values. Behind the scenes StepSlider manipulate integer indexes.

spromicky 520 Dec 20, 2022
Use UIResponder to imitate an iOS slider.

WWSlider Use UIResponder to imitate an iOS slider. 使用UIResponder仿造一個iOS的滑桿. Installation with Swift Package Manager dependencies: [ .package(url:

William-Weng 2 May 5, 2022
Customizable animated slider for iOS

MMSegmentSlider MMSegmentSlider is an easy-to-use IBDesignable animated slider for iOS 7+ written in Objective-C. Installation From CocoaPods CocoaPod

Max Medvedev 48 Jul 26, 2022
An iOS Slider written in Swift.

JDSlider Beetripper App's screenshots Example Project To run the example project, clone the repo, and run pod install from the Example directory first

Jelly Development 84 Jul 26, 2022
Customizable animated slider for iOS

MMSegmentSlider MMSegmentSlider is an easy-to-use IBDesignable animated slider for iOS 7+ written in Objective-C. Installation From CocoaPods CocoaPod

Max Medvedev 48 Jul 26, 2022
An iOS-16-styled slider.

Slyderin An iOS-16-styled slider. Available on iOS 13 and later. Slyderin.Demo.mov How to Use Include it with Swift Package Manager. Add it to your vi

iMoeNya 3 Jan 1, 2023
🎚️ STDiscreteSlider – slider which allows user to choose value only from predefined set of data.

STDiscreteSlider – slider which allows user to choose value only from predefined set of data. Slider may receive any types of options, you may pass set of integers or strings, or any other type. Written using SwiftUI.

Tamerlan Satualdypov 15 Apr 3, 2022
TriggerSlider is a simple SwiftUI trigger slider

TriggerSlider is a simple SwiftUI trigger slider which can be used instead of a button, e.g. in a situation where the

Dominik Butz 4 Dec 16, 2022