Skip to content

๐ŸŽจ Snapchat-style color picker in Swift

License

Notifications You must be signed in to change notification settings

SwiftKickMobile/ColorSlider

ย 
ย 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation


ColorSlider is an iOS color picker with live preview written in Swift.

Build Status Pod Version Swift Version GitHub license

Features
๐Ÿ‘ป "Snapchat-style" color picker
๐ŸŒˆ Extensible live preview
๐ŸŽจ Customizable appearance
๐ŸŒ€ Vertical and horizontal support
๐ŸŽน Black and white colors included
๐Ÿ“š Fully documented
๐Ÿค Swift 5

Usage

Create and add a ColorSlider to your view:

let colorSlider = ColorSlider(orientation: .vertical, previewSide: .left)
colorSlider.frame = CGRect(x: 0, y: 0, width: 12, height: 150)
view.addSubview(colorSlider)

Respond to changes in color using UIControlEvents:

colorSlider.addTarget(self, action: #selector(changedColor(_:)), forControlEvents: .valueChanged)

func changedColor(_ slider: ColorSlider) {
    var color = slider.color
    // ...
}

Customize appearance attributes:

// Add a border
colorSlider.gradientView.layer.borderWidth = 2.0
colorSlider.gradientView.layer.borderColor = UIColor.white.cgColor

// Disable rounded corners
colorSlider.gradientView.automaticallyAdjustsCornerRadius = false

Preview

ColorSlider has a live preview that tracks touches along it. You can customize it:

let previewView = ColorSlider.DefaultPreviewView()
previewView.side = .right
previewView.animationDuration = 0.2
previewView.offsetAmount = 50

let colorSlider = ColorSlider(orientation: .vertical, previewView: previewView)

Create your own live preview by subclassing DefaultPreviewView or implementing ColorSliderPreviewing in your UIView subclass. Then, just pass your preview instance to the initializer:

let customPreviewView = MyCustomPreviewView()
let colorSlider = ColorSlider(orientation: .vertical, previewView: customPreviewView)

ColorSlider will automatically update your view's center as touches move on the slider. By default, it'll also resize your preview automatically. Set colorSlider.autoresizesSubviews to false to disable autoresizing.

To disable the preview, simply pass nil to ColorSlider's initializer:

let colorSlider = ColorSlider(orientation: .vertical, previewView: nil)

See the documentation for more details on custom previews.

Documentation

ColorSlider is fully documented here.

Installation

platform :ios, '9.0'
pod 'ColorSlider', '~> 4.4'
github "gizmosachin/ColorSlider" >= 4.4

Version Compatibility

Swift Version ColorSlider Version
5.0 master
4.2 4.3

Demo

Please see the Demo directory for a basic iOS project that uses ColorSlider.

Contributing

ColorSlider is a community - contributions and discussions are welcome!

Please read the contributing guidelines prior to submitting a Pull Request.

License

ColorSlider is available under the MIT license, see the LICENSE file for more information.

About

๐ŸŽจ Snapchat-style color picker in Swift

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Swift 92.7%
  • Ruby 5.9%
  • Shell 1.4%