Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact

UISlider example (iOS Slider) using swift

May 8, 2015 by Source Freeze 3 Comments

An iOS UISlider object used to select single value from a continues range of sliders, slider are always displayed as horizontal bars and it has a thumb which is used to select the specific values in the slider. for more reference you go through the apple documentation for UISlider class.

In this tutorial we are going to learn about how to implement UISlider using swift programming language, so you must need Xcode 6 or greater version to run this example.

Open the Xcode, create new project and select the Single View Application template, then enter the product name as UISlider example next fill out the Organization Name and Organization identifier then select “Swift” language and device family as iPhone and  remains core data field as unchecked because we are not using that feature, to create a ios slider we can either use storyboard or create by code instance let’s start our tutorial using story board.

uislider example using swift

Adding UISlider into the view

Go to the storyboard and drag the ios slider and label to the main view, now the storyboard will looks like below, using storyboard we can create a user interface for universal devices, but in this example we are creating user interface only for iPhone device. So go to the File inspector and uncheck the Use Size Classes.

uislider file inspector

then, it will popup a new window in that select iPhone from Keep size class data for: field, like below.

uislider disable size classes

Drag the UISlider and UILabel into the view now you can move slider using thumb image, and edit the UILabel values as 0, it will looks like below

uislider example in storyboard

Next, select the UISlider go to the Show the Attributes Inspector, under the slider change the maximum value to 100 and current value as 0.

uislider vlaue changed event

Then go to the ViewController.swift  by selecting the show the Assistance editor, and create outlet for UISlider.

IBOutlet for UISlider

Next create the IBOutlet for UILabel like below,

IBOutlet for slidervalue UILabel

UISlider Value Changed event

In order to respond to the slider value changing, we have to add IBAction for UISlider, Hold the ctrl key and add into ViewController.swift file like below, in the dialog pops up, select the Connection value as Action and enter “sliderValueChanged” in the Name field and click the connect button.

uislider value changed event

 

it will create the sliderValueChanged(sender: AnyObject) into the ViewController.swift file, then add the below code into this method. 

    @IBAction func sliderValueChanged(sender: UISlider) {

        var selectedValue = Float(sender.value)

        slidervalue.text = String(stringInterpolationSegment: selectedValue)
    }

Then Build and Run the application, and drag the slider thumb now you can see the values changes are reflected in UILabel. the output screen will looks like below, and download the uislider tutorial source code from here. 

uislider example output

 

 

 

Filed Under: ios-tutorial, swift, uislider

Recent Posts

  • Ionic 2 getting started
  • Best Mobile UI Frameworks using HTML5, CSS and JS
  • MBProgressHUD example in Swift
  • UIActivityindicatorview example in ios using swift
  • ionic side menu example
  • Cordova InAppBrowser Plugin Example using ionic framework

TAGS

cross-platform ionic iOS mobile application development objective-c swift uiwebview Visual Studio plugin

Categories

  • cordova
  • cross-platform
  • Hybrid
  • Ionic 2
  • ionic framework
  • ios-tutorial
  • Mobile App Development
  • phonegap
  • swift
  • UIAlertController
  • uidatepicker
  • uipickerview
  • uislider
  • UISwitch
  • uitableview
  • uitextfield
  • uiwebview
  • visual studio – plugin

Recent Posts

  • Ionic 2 getting started
  • Best Mobile UI Frameworks using HTML5, CSS and JS
  • MBProgressHUD example in Swift
  • UIActivityindicatorview example in ios using swift
  • ionic side menu example
  • Cordova InAppBrowser Plugin Example using ionic framework

Recent Comments

  • zulfi on iOS UIPickerView Example using Swift
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework
  • SourceFreeze on Cordova InAppBrowser Plugin Example using ionic framework
  • Muhsin on Cordova InAppBrowser Plugin Example using ionic framework

Tags

cross-platform ionic iOS mobile application development objective-c swift uiwebview Visual Studio plugin

Copyright © 2022 · eleven40 Pro Theme on Genesis Framework · WordPress · Log in