UISlider
UISlider displays a slider for selecting one value from a range of values.
Example
Instructions
Create
- Open Xcode
- Click File
- Click New
- Click Project...
- Under iOS, click Application
- Click Single View Application
- Click Next
- After Product Name, type your product name
- After Organization Name, type your organization name or leave blank
- After Organization Identifier, type your organization identifier
- After Language, select Swift
- After Devices, select Universal
- Uncheck Use Core Data
- Click Next
- Select a folder
- After Source Control, uncheck Create Git repository on
- Click Create
Edit ViewController.swift
- Open ViewController.swift
- Copy and paste code
Edit Main.storyboard
- Open Main.storyboard
- Click View
- Click Utilities
- Click Show Object Library
- Drag Slider to View
- Click View
- Click Utilities
- Click Show Connections Inspector
- Under Sent Events, after Value Changed, drag + to View Controller
- Click valueChanged:
- Under Referencing Outlets, after New Referencing Outlet, drag + to View Controller
- Click interfaceBuilderSlider
Add Image
- Click File
- Click Add Files to "UISlider" ...
- Select image
- After Destination, check Copy items into destination group's folder (if needed)
- After Folders, select Create groups for any added folders
- After Add to targets, check UISlider
- Click Add
Run
- Click Product
- 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) } }