iOS 7 Programming Cookbook

1.7. Customizing the UISlider

Problem

You are using the default appearance of the UISlider UI component, and now you want to customize this look and feel.

Solution

Either modify the tint colors of the different parts of the slider or provide your own images for the parts.

Discussion

Apple has done a great job giving us methods to customize UI components in the iOS SDK. One customization is to modify the tint colors of various parts of the UI component. Let’s take a simple UISlider as an example. I have broken it down into its different UI components in Figure 1-20.

Figure 1-20. Different components of a UISlider

For each of these components in UISlider, a method and property exist that allow you to change the appearance of the slider. The easiest of these properties to use are the ones that modify the tint color of these components:

minimumTrackTintColor

This property sets the tint color of the minimum value track view.

thumbTintColor

This property, as its name shows, sets the tint color of the thumb view.

maximumTrackTintColor

This property sets the tint color of the maximum value track view.

All these properties are of type UIColor.

The following sample code instantiates a UISlider and places it at the center of the view of the view controller. It also sets the tint color of the minimum value tracking view of the slider to red, the tint color of the thumb view of the slider to black, and the tint ...