How to Implement UI Slider For Adding Custom Slider in Your Next iPhone App

0
Shares
How to Implement UI Slider For Adding Custom Slider in Your Next iPhone App
5 (100%) 2 votes

Sliders are one of the great ways to allow your app users to set values in your iOS apps. And, to add such sliders, an iOS UI Slider object is used to select single value from a slider. This UI Slider is presented in horizontal bar with a thumb to select the value.

In our today’s iOS app tutorial, we’ll be developing a simple app to demonstrate how to use UI Slider to for adding custom sliders for your iPhone app development project.

Let’s Get Started

Open XCode and create a new project.

sampleslider1

Select Single View Application as project type and click on Next.

sampleslider2

In the next tab, write your project name and details.

sampleslider3

Once you create new project, go to Main.storyboard and select ViewController.

sampleslider4

Now drag and drop UISlider from “Show the object library” section.

sampleslider5

sampleslider6

Now, select slider and see the attribute inspector which have properties for slider. We can manage the minimum value, maximum value, current value, tack image for min, max, thumb custom image, alignment etc.

sampleslider7

Now we set outlet UISlider in ViewController.

@IBOutlet weak var slider: UISlider!

sampleslider8

set IBAction for UISlider, so when we move thumb of slider, value will get changed.

@IBAction func sliderValueChange(sender: AnyObject)
{

}

sampleslider9

While creating IBAction for UISlider we need to set Event “Value Changed”.

sampleslider10

In viewDidLoad(), we have used some properties of UISlider for set minimum, maximum and current values.

We can do more with slider.

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
//Minimum Slider Value
slider.minimumValue = 0

//Maximum Slider Value
slider.maximumValue = 100

//Current Slider Value
slider.value = 10

//If continuous = true then value change instantly else value will update once drag action completed
slider.continuous = false
}

And done!

simulator-screen-shot-jan-17-2017-11-24-45-am

Though, this was just a simple demo. It’s also possible to add a custom appearance UI Slider by adding custom images in thumb and track. But if you’re just starting out, and want to build iOS app for your startup, hire iPhone app developer for your iPhone app development project.

Grab a free copy of UISlider example demo from Github.

This page was last edited on July 23rd, 2018, at 3:20.
 
0
Shares
 

Have an iOS App Idea in Mind? Let's Discuss!

Get your free consultation now