col

ColorSlider

🎨 Snapchat-style color picker in Swift

Showing:

Popularity

Downloads/wk

0

GitHub Stars

266

Maintenance

Last Commit

2yrs ago

Contributors

6

Package

Dependencies

0

License

MIT

Categories

Readme


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

CocoaPods

platform :ios, '9.0'
pod 'ColorSlider', '~> 4.4'

Carthage

github "gizmosachin/ColorSlider" >= 4.4

Version Compatibility

Swift VersionColorSlider Version
5.0master
4.24.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.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100