iOS 7 Programming Cookbook

1.6. Implementing Range Pickers with UISlider

Problem

You would like to allow your users to specify a value within a range, using an easy-to-use and intuitive UI.

Solution

Use the UISlider class.

Discussion

You’ve certainly seen sliders before. Figure 1-17 shows an example.

Figure 1-17. The volume slider in Control Center

To create a slider, instantiate an object of type UISlider. Let’s dive right in and create a slider and place it on our view controller’s view. We’ll start with our view controller’s implementation file:

#import "ViewController.h"

@interface ViewController ()
@property (nonatomic, strong) UISlider *slider;
@end

@implementation ViewController

...

And now let’s go to the viewDidLoad method and create our slider component. In this code, we are going to give our slider a range between 0 and 100 and set its default position to be halfway between start and end.

Note

The range of a slider has nothing to do with its appearance. We use the range specifiers of a slider to tell the slider to calculate its value based on the relative position within the range. For instance, if the range of a slider is provided as 0 to 100, when the knob on the slider is on the leftmost part, the value property of the slider is 0, and if the knob is to the rightmost side of the slider, the value property would be 100.

- (void)viewDidLoad{
    [super viewDidLoad];

    self.slider = [[UISlider alloc] initWithFrame ...