UISlider

UISlider displays a slider for selecting one value from a range of values.

Example

UISlider

Instructions

Create

  1. Open Xcode
  2. Click File
  3. Click New
  4. Click Project...
  5. Under iOS, click Application
  6. Click Single View Application
  7. Click Next
  8. After Product Name, type your product name
  9. After Organization Name, type your organization name or leave blank
  10. After Organization Identifier, type your organization identifier
  11. After Language, select Swift
  12. After Devices, select Universal
  13. Uncheck Use Core Data
  14. Click Next
  15. Select a folder
  16. After Source Control, uncheck Create Git repository on
  17. Click Create

Edit ViewController.swift

  1. Open ViewController.swift
  2. Copy and paste code

Edit Main.storyboard

  1. Open Main.storyboard
  2. Click View
  3. Click Utilities
  4. Click Show Object Library
  5. Drag Slider to View
  6. Click View
  7. Click Utilities
  8. Click Show Connections Inspector
  9. Under Sent Events, after Value Changed, drag + to View Controller
  10. Click valueChanged:
  11. Under Referencing Outlets, after New Referencing Outlet, drag + to View Controller
  12. Click interfaceBuilderSlider

Add Image

  1. Click File
  2. Click Add Files to "UISlider" ...
  3. Select image
  4. After Destination, check Copy items into destination group's folder (if needed)
  5. After Folders, select Create groups for any added folders
  6. After Add to targets, check UISlider
  7. Click Add

Run

  1. Click Product
  2. Click Run

Code

import UIKit

class ViewController: UIViewController
{
  @IBOutlet weak var interfaceBuilderSlider: UISlider!
  var label: UILabel!
  
  override func prefersStatusBarHidden() -> Bool
  {
    return true
  }
  override func viewDidLoad()
  {
    super.viewDidLoad()
    
    self.label = UILabel()
    self.label.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.label.text = NSString(format: "%f", self.interfaceBuilderSlider.value)
    self.label.textAlignment = NSTextAlignment.Center
    self.view.addSubview(self.label)
    self.view.removeConstraints(self.view.constraints())
    self.view.addConstraint(NSLayoutConstraint(item: self.label, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))
    
    self.view.addConstraint(NSLayoutConstraint(item: self.interfaceBuilderSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.label, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: self.interfaceBuilderSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))
    
    let valueSlider = UISlider()
    valueSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    valueSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    valueSlider.value = 0.5
    self.view.addSubview(valueSlider)
    self.view.addConstraint(NSLayoutConstraint(item: valueSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: self.interfaceBuilderSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: valueSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let continuousSlider = UISlider()
    continuousSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    continuousSlider.continuous = false
    continuousSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(continuousSlider)
    self.view.addConstraint(NSLayoutConstraint(item: continuousSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: valueSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: continuousSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let minimumValueSlider = UISlider()
    minimumValueSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    minimumValueSlider.minimumValue = -10
    minimumValueSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    minimumValueSlider.value = -10
    self.view.addSubview(minimumValueSlider)
    self.view.addConstraint(NSLayoutConstraint(item: minimumValueSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: continuousSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: minimumValueSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let maximumValueSlider = UISlider()
    maximumValueSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    maximumValueSlider.maximumValue = 10
    maximumValueSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    maximumValueSlider.value = 10
    self.view.addSubview(maximumValueSlider)
    self.view.addConstraint(NSLayoutConstraint(item: maximumValueSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: minimumValueSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: maximumValueSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let thumbTintColorSlider = UISlider()
    thumbTintColorSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    thumbTintColorSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    thumbTintColorSlider.thumbTintColor = UIColor.redColor() // not working properly as of iOS8
    self.view.addSubview(thumbTintColorSlider)
    self.view.addConstraint(NSLayoutConstraint(item: thumbTintColorSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: maximumValueSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: thumbTintColorSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let minimumTrackTintColorSlider = UISlider()
    minimumTrackTintColorSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    minimumTrackTintColorSlider.minimumTrackTintColor = UIColor.redColor()
    minimumTrackTintColorSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    minimumTrackTintColorSlider.value = 1
    self.view.addSubview(minimumTrackTintColorSlider)
    self.view.addConstraint(NSLayoutConstraint(item: minimumTrackTintColorSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: thumbTintColorSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: minimumTrackTintColorSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let maximumTrackTintColorSlider = UISlider()
    maximumTrackTintColorSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    maximumTrackTintColorSlider.maximumTrackTintColor = UIColor.redColor()
    maximumTrackTintColorSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(maximumTrackTintColorSlider)
    self.view.addConstraint(NSLayoutConstraint(item: maximumTrackTintColorSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: minimumTrackTintColorSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: maximumTrackTintColorSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let thumbImageSlider = UISlider()
    thumbImageSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    thumbImageSlider.setThumbImage(UIImage(named: "HappyFace"), forState: UIControlState.Normal)
    thumbImageSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(thumbImageSlider)
    self.view.addConstraint(NSLayoutConstraint(item: thumbImageSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: maximumTrackTintColorSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: thumbImageSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let minimumTrackImageSlider = UISlider()
    minimumTrackImageSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    minimumTrackImageSlider.setMinimumTrackImage(UIImage(named: "HappyFace"), forState: UIControlState.Normal)
    minimumTrackImageSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    minimumTrackImageSlider.value = 1
    self.view.addSubview(minimumTrackImageSlider)
    self.view.addConstraint(NSLayoutConstraint(item: minimumTrackImageSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: thumbImageSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: minimumTrackImageSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let maximumTrackImageSlider = UISlider()
    maximumTrackImageSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    maximumTrackImageSlider.setMaximumTrackImage(UIImage(named: "HappyFace"), forState: UIControlState.Normal)
    maximumTrackImageSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(maximumTrackImageSlider)
    self.view.addConstraint(NSLayoutConstraint(item: maximumTrackImageSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: minimumTrackImageSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: maximumTrackImageSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let minimumValueImageSlider = UISlider()
    minimumValueImageSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    minimumValueImageSlider.minimumValueImage = UIImage(named: "HappyFace")
    minimumValueImageSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(minimumValueImageSlider)
    self.view.addConstraint(NSLayoutConstraint(item: minimumValueImageSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: maximumTrackImageSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: minimumValueImageSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))

    let maximumValueImageSlider = UISlider()
    maximumValueImageSlider.addTarget(self, action: "valueChanged:", forControlEvents: UIControlEvents.ValueChanged)
    maximumValueImageSlider.maximumValueImage = UIImage(named: "HappyFace")
    maximumValueImageSlider.setTranslatesAutoresizingMaskIntoConstraints(false)
    self.view.addSubview(maximumValueImageSlider)
    self.view.addConstraint(NSLayoutConstraint(item: maximumValueImageSlider, attribute: NSLayoutAttribute.Top, relatedBy: NSLayoutRelation.Equal, toItem: minimumValueImageSlider, attribute: NSLayoutAttribute.Bottom, multiplier: 1, constant: 0))
    self.view.addConstraint(NSLayoutConstraint(item: maximumValueImageSlider, attribute: NSLayoutAttribute.Width, relatedBy: NSLayoutRelation.Equal, toItem: self.view, attribute: NSLayoutAttribute.Width, multiplier: 1, constant: 0))
  }
  @IBAction func valueChanged(sender: UISlider!)
  {
    self.label.text = NSString(format: "%f", sender.value)
  }
}

External

Apple iOS Developer Library