Awesome Open Source
Awesome Open Source

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

Build Status Pod Version Swift Version GitHub license

👻 "Snapchat-style" color picker
🌈 Extensible live preview
ğŸŽ¨ Customizable appearance
🌀 Vertical and horizontal support
ğŸŽ¹ Black and white colors included
📚 Fully documented
🐤 Swift 5


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)

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


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.


ColorSlider is fully documented here.



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


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


ColorSlider is a community - contributions and discussions are welcome!

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


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

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
swift (7,814) 
drawing (95) 
color-picker (77) 
snapchat (32)