IMD 1_Xcode RGB Slider 2

This is second class of making RGB Slider. Last time I’ve failed to simulate because of an error. Now I know why that error was happened.

스크린샷 2016-03-22 오전 12.24.55

I solved this error by connecting outlet line again.

We can also change the size of simulator. Go to Window>Scale.

스크린샷 2016-03-28 오후 6.34.42.png

If you have some error of naming, just delete the label box, and create new one.

And if you have a Blue Arrow, you have to remove it. Because that can cause some error.

Just drag and drop anywhere to remove that blue arrow.

You can drag the line opposite way, too.

I’ve made green and blue to move same with red.

스크린샷 2016-03-22 오전 11.31.58.png

And to set background color. This is the code needed.

view.backgroundColor = UIColor(red: redColor, green: greenColor, blue: blueColor, alpha: 1)

스크린샷 2016-03-22 오후 12.16.08.png

Then we can see this.

스크린샷 2016-03-22 오후 12.12.38.png

Wow, almost done with our RGB Slider. Now I will bring color patch from the filter.

스크린샷 2016-03-22 오후 12.22.43.png

Search ‘view’ and drag it to your screen. And now we will gonna add some code.

colorPatch.backgroundColor = UIColor(red: redColor, green: greenColor, blue: blueColor, alpha: 1)

스크린샷 2016-03-22 오후 12.27.07.png

Instead of View, we changed to colorPatch. Now our RGB Slider is finished!

My Code :


//  ViewController.swift

//  RGBslider1212200


//  Created by 서예정 on 2016. 3. 15..

//  Copyright © 2016 YeJung. All rights reserved.


//import the UIKit library

import UIKit

//create a class for the ViewController

class ViewController: UIViewController {


    //create variables to hold slider values


    @IBOutlet weak var redSlider: UISlider!

    @IBOutlet weak var greenSlider: UISlider!

    @IBOutlet weak var blueSlider: UISlider!


    //create variables for the text labels

    @IBOutlet weak var redLabel: UILabel!

    @IBOutlet weak var greenLabel: UILabel!

    @IBOutlet weak var blueLabel: UILabel!


    //create a variable for the colorPatch


    @IBOutlet weak var colorPatch: UIView!


    override func viewDidLoad() {


        // Do any additional setup after loading the view, typically from a nib.



    override func didReceiveMemoryWarning() {


        // Dispose of any resources that can be recreated.



    //create a function that update the color when the slider is moved

    @IBAction func updateColor(sender: AnyObject) {


        //create variables to hold the slide values

        let redColor = CGFloat(redSlider.value)

        let greenColor = CGFloat(greenSlider.value)

        let blueColor = CGFloat(blueSlider.value)


        //map the slider values from 0 -> 1 to 0 -> 255

        let redMapped = Int(redColor*255)

        let greenMapped = Int(greenColor*255)

        let blueMapped = Int(blueColor*255)


        //send the value to the text field

        redLabel.text = String(\(redMapped)”)

        greenLabel.text = String(\(greenMapped)”)

        blueLabel.text = String(\(blueMapped)”)


        //set the background color

        //view.backgroundColor = UIColor(red: redColor, green: greenColor, blue: blueColor, alpha: 1)


        colorPatch.backgroundColor = UIColor(red: redColor, green: greenColor, blue: blueColor, alpha: 1)           


    //end of class


스크린샷 2016-03-22 오후 12.27.50.png

Isn’t it awesome?

After this class, I’ve changed some interface. Check this out.

스크린샷 2016-03-28 오후 6.28.09.png   스크린샷 2016-03-28 오후 6.27.56   스크린샷 2016-03-28 오후 6.26.55

So beautiful. I really like it. So this is end of my work! My First RGB Slider~

My Dropbox Link :


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s