How to use UISlider


This tutorial has been updated for X code 7.3 & swift 2.2

1. First lets set up the x code project as usual. Create new single view application X code project. Set the values as follows and save it on your desktop.

slider x code project


2. Go to main storyboard and select view controller. Set its size iPhone 4-inch in attribute section.

size iPhone 4 inch


3. Add slider to the storyboard & add 3 different labels. Make label look like in picture

slider & labels


4. Set maximum value of slider to 100 & current value to 15

minimum & maximum slider value


5. Connect slider as outlet to swift file

slider as outlet


6. Connect only age number label as outlet to swift file. Leave other labels alone.

label as outlet


7. Connect slider as action to swift file

slider as action


8. Add following code in view did load. This will set initial value for slider & age label when the app opens.

    override func viewDidLoad() {
        // 8
        age.text = "15"
        slider.value = 15
        // Do any additional setup after loading the view, typically from a nib.

9. Add following code in slider action

    @IBAction func sliderValueChanged(sender: UISlider) {
        // 9
        let num = Int(sender.value)
        age.text = "\(num)"

10. Now build and run the app in iPhone 5s & test the slider

Screen Shot 2015-03-05 at 9.58.28 pm
Download X code file
Your challenge is to use text field instead of label to show age. So if you type in number in textfield then slider will also show the change.

Your über challenge is to save age using core data. So overtime app is opened it remembers last entry.

Screen Shot 2015-03-05 at 10.18.50 pm
Download Challenge Solution

Total 2 Votes

Tell us how can I improve this tutorial?

+ = Verify Human or Spambot ?