Change Values with UISlider in iOS7

A UISlider object is a visual control used to select a single value from a continuous range of values. Sliders are always displayed as horizontal bars. An indicator, or thumb, notes the current value of the slider and can be moved by the user to change the setting. In this tutorial, we display an UISlider and a Label. When moving the slider, the corresponding value will be displayed in the Label.

Update: Sep 16, 2014. The rewritten tutorial in Swift for iOS 8 and Xcode 6 is available here.

Open Xcode and create a new Single View Application. For product name, use iOS7UISliderTutorial and then fill out the Organization Name, Company Identifier and Class Prefix fields with your customary values. Make sure only iPhone is selected in Devices. 

Go to the Storyboard and drag a Slider to the top of the main view. Select the slider and go to the Atrributes Inspector. Under the slider section change the maximum value to 100 and change the current value to 0.

The thumb of the slider will move to the left side. Next, drag a label to the main view and position it below the slider. Center the text and change it to 0. The Storyboard will look like this


Select the Assistant Editor and open ViewController.m. Ctrl and drag from the Slider to the @interface section and create the following outlet.

Ctrl and drag from the Label to the @interface section and create the following outlet.

Finally, Ctrl and Drag from the slider and create the following action.

Go to ViewController.m and implement the sliderValueChanged method

- (IBAction)sliderValueChanged:(UISlider *)sender {
    self.myLabel.text =  [NSString stringWithFormat:@"%d", (int)sender.value];

The slider's sender.value is a float variable so we cast it to an integer. Build and Run the project and move the slider to update the value of the label.

You can download the source code of the iOS7UISliderTutorial at the ioscreator repository on github.