Source Freeze

  • Home
  • iOS
  • Swift
  • Cross-Platform
  • About
  • Contact
Home » UISlider example (iOS Slider) using swift

UISlider example (iOS Slider) using swift

January 4, 2023 by Source Freeze Leave a Comment

An iOS UISlider object is used to select a single value from a continuous range of sliders, the slider is always displayed as horizontal bars and it has a thumb that 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 just need Xcode 6 or higher version to run this example.

Open the Xcode, create a 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 an ios slider we can either use a 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 look like the below, using storyboard we can create a user interface for universal devices, but in this example, we are creating a user interface only for iPhone devices. 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 it 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 look like below, and download the uislider tutorial source code from here. 

uislider example output

Filed Under: ios-tutorial, swift, uislider

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recent Posts

  • How to Generate random numbers in JavaScript
  • How to Scroll to an Element in a React Component?
  • How to get a Date without the Time in JavaScript
  • How to modify url without reloading the page using javascript
  • How to disable server side rendering in nextjs
  • How to get a file type from URL in JavaScript

Recent Posts

  • How to Generate random numbers in JavaScript
  • How to Scroll to an Element in a React Component?
  • How to get a Date without the Time in JavaScript
  • How to modify url without reloading the page using javascript
  • How to disable server side rendering in nextjs
  • How to get a file type from URL in JavaScript

Recent Comments

    Tags

    beginner colon cross-platform es6 function html ionic iOS javascript mobile application development nextjs objective-c swift switch ternary typescript uiwebview Visual Studio plugin web developer

    Copyright © 2025 Source Freeze