All Projects → ouraigua → Jocircularslider

ouraigua / Jocircularslider

Licence: mit
A highly customisable and reusable circular slider for iOS applications.

Programming Languages

swift
15916 projects

Projects that are alternatives of or similar to Jocircularslider

Hgcircularslider
A custom reusable circular / progress slider control for iOS application.
Stars: ✭ 2,240 (+1650%)
Mutual labels:  slider, progress, progress-bar, circle, circular, progress-circle
mp-progress
专注于小程序圆环形进度条的小工具
Stars: ✭ 72 (-43.75%)
Mutual labels:  progress, progress-bar, circle, progress-circle
Mkringprogressview
⭕️ Ring progress view similar to Activity app on Apple Watch
Stars: ✭ 1,140 (+790.63%)
Mutual labels:  progress, progress-bar, circle, progress-circle
ALProgressView
Animated and fully customizable progress view with 2 styles: ring and bar.
Stars: ✭ 72 (-43.75%)
Mutual labels:  progress-bar, circle, progress-circle
React Sweet Progress
A way to quickly add a progress bar to react app 🌈
Stars: ✭ 239 (+86.72%)
Mutual labels:  progress, progress-bar, progress-circle
Percircle
⭕️ CSS percentage circle built with jQuery
Stars: ✭ 217 (+69.53%)
Mutual labels:  progress-bar, circle, progress-circle
react-sweet-progress
A way to quickly add a progress bar to react app 🌈
Stars: ✭ 250 (+95.31%)
Mutual labels:  progress, progress-bar, progress-circle
tox-progress
This JavaScript library was made to easily create animated radial progress bars.
Stars: ✭ 13 (-89.84%)
Mutual labels:  progress, progress-bar, circle
rn-circular-slider
React Native circular slider based on react-native-svg
Stars: ✭ 25 (-80.47%)
Mutual labels:  slider, circle, circular
React Circle
Renders a svg circle + progress, it just works 💘
Stars: ✭ 925 (+622.66%)
Mutual labels:  progress, circle
Vue Step Progress
A simple Vue component that displays a Progress Bar with labels for each step
Stars: ✭ 26 (-79.69%)
Mutual labels:  progress, progress-bar
Swiftfortunewheel
The ultimate spinning wheel view that supports dynamic content and rich customization.
Stars: ✭ 114 (-10.94%)
Mutual labels:  circle, circular
Roundprogresstextview
TextView with Round Pogress
Stars: ✭ 18 (-85.94%)
Mutual labels:  progress, progress-bar
Dockprogress
Show progress in your app's Dock icon
Stars: ✭ 813 (+535.16%)
Mutual labels:  progress-bar, progress-circle
Uicircularprogressring
A circular progress bar for iOS written in Swift
Stars: ✭ 1,658 (+1195.31%)
Mutual labels:  progress, circular
Angular Svg Round Progressbar
Angular module that uses SVG to create a circular progressbar
Stars: ✭ 726 (+467.19%)
Mutual labels:  progress, progress-circle
Python Progressbar
Progressbar 2 - A progress bar for Python 2 and Python 3 - "pip install progressbar2"
Stars: ✭ 682 (+432.81%)
Mutual labels:  progress, progress-bar
Iprogresshud
An elegant, lightweight and responsive progress HUD for iOS app with very simple usage. Available 32 indicators by NVActivityIndicatorView.
Stars: ✭ 66 (-48.44%)
Mutual labels:  progress, progress-circle
Node Status
Nodejs stdout status and progress bar. Multi-item, various display types.
Stars: ✭ 71 (-44.53%)
Mutual labels:  progress, progress-bar
Circle Progress View
Animated circular progress view for Android
Stars: ✭ 1,185 (+825.78%)
Mutual labels:  progress-bar, circle

Version Platform Language License Twitter: @ouraigua Readme Score codebeat badge

JOCircularSlider

JOCircularSlider is a highly customisable and reusable iOS circular slider that mimics the behaviour of a knob control. It uses no preset images and every one of its components is drawn completely in code making it extremely adaptable to every design and theme.

Example

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

Requirements

  • iOS 10.0+
  • Xcode 10.0

Installation

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

pod 'JOCircularSlider'

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

github "ouraigua/JOCircularSlider"

Usage

  1. Visually:

Drag a UIView to your storyboard, change its class of to CircularSlider and start visually customising the design to your liking. All the parameters are IBInspectable, so you can configure the slider straight from the attribute inspector tab, without having to write a single line of code.

  1. Programatically:
import JOCircularSlider

let circularSlider = CircularSlider(frame: aFrame)
circularSlider.startAngle = 230
circularSlider.endAngle = 310
circularSlider.minimumValue = 0
circularSlider.maximumValue = 60
circularSlider.isClockwise = false

These are just few of the many params you can configure for the slider.

The slider's min/max values are IBInspectable and default to 0.0 and 100.0 respectively. They also support negative and positive values or a mixture of them.

@IBInspectable open var minimumValue: CGFloat = 0
@IBInspectable open var maximumValue: CGFloat = 100

The slider's value property is both { get set } and it is designed to work similarly to the familiar value property of UIKit's generic UISlider.

/**
    This value will be pinned to minimumValue/maximumValue
    The default value of this property is 0.0. 
*/
@IBInspectable open var value: CGFloat  // { get set }

In order to get value change notifications, use the Target-Action pattern which is an inherent part of UIControl, like so:

/**
    Add target/action for particular event.
    - parameter target:     The object whose action method is called
    - parameter action:     A selector identifying the action method to be called
    - parameter Event:      The control-specific events for which the action method is called
                            So far I've only implemented the following:
                            
                            UIControl.Event.valueChanged
                            UIControl.Event.editingDidBegin
                            UIControl.Event.editingDidEnd
*/
circularSlider.addTarget(target: Any?, action: Selector, for: UIControl.Event)

To Control the appearance of the label displaying the value, use these:

open func setLabelFont(named: String, textColor: UIColor, multiplier: CGFloat)
open func setLabelShadow(color: UIColor, opacity: Float = 1, offset: CGSize = CGSize(width: 1, height: 1), radius: CGFloat = 0)

You can also specify the number of decimal places this label should show. The default is 0.0 unless for example the value is within [0.0, 1.0]

@IBInspectable open var labelDecimalPlaces: Int = 0

If you need to override the text in the label, then just implement the following function inside the selector of the Target-Action method for the event UIControl.Event.valueChanged

open func setLabelText(_ text: String?)

References

The project is Inspired by:

Author

Jalal Ouraigua, [email protected]

License

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].