CCControlExtension: the Sliders

Note: This post belongs to a long series whose summary is here and which aims to present you how to use the CCControl  library.

In this part we will see how to create and work with sliders in Cocos2D thanks to a class named CCControlSlider. A slider is a visual control used to select a single value from a continuous range of values in a linear way.


A CCControlSlider is composed of several graphical elements as shown below:


These components are:

  • A background sprite which represents the total range
  • A track bar sprite which is combined with the thumb to display the current value in a visual way
  • A thumb sprite which show the current slider’s value in a graphical way

Default Behavior

The simplest way to create a slider is to give the name of each components when you init it:

// Create a slider
CCControlSlider *slider = [CCControlSlider sliderWithBackgroundFile:@"background.png"

By default when you create a slider the minimum value of the range is set to 0 and the maximum value to 1. It means that you can only pick values between 0 and 1, e.g. 0.2. Now, we are going to see how retrieve the values of the slider by using methods provides by the CCControl class.

Working with Target-Action pairs

Like with all the CCControl’s components you have the possibility to listening to events with the help of the target-action pairs or with the help of blocks as shown below:

// Listening to changes of values by using the CCControlEventValueChanged event
// First possibility: using a target-action pair
[slider addTarget:self action:@selector(valueChanged:) forControlEvents:CCControlEventValueChanged];
- (void)valueChanged:(CCControlSlider *)sender
   NSLog(@"Slider value = %.02f", sender.value);	

// Second possibility: using blocks
[slider setBlock:^(CCControlSlider *sender, CCControlEvent event)
    NSLog(@"Slider value = %.02f", sender.value);            
 } forControlEvents:CCControlEventValueChanged];

For the sliders you need to listen to the CCControlEventValueChanged event to track its value. But as you can see, with the help of the CCControl API it is very easy.

Now we’ve seen the main functions of the CCControlSlider we are going to talk about its own properties.


The CCControlSlider is built with a set of properties which are listed below:

  • minimumValue: defines the minimum value that the slider can have
  • maximumValue: defines the maximum value that the slider can have
  • value: contains the current value (you can animating the change of the value by calling the setValue:Animated: method anyway)
  • onThumbTintColor: defines the color used to tint the appearance of the thumb when the slider is pushed:

Thumb Tint Color

Where To Go From Here?

To conclude the CCControlSliders is very similar to the UISliders and there are very easy to use. In the future some properties will be added but for the moment it is very basic.

You can find the code source and the examples on github and the API documentation hosted here.

If you have any comments or questions about this article, don’t hesitate to post a comment!

1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInShare on RedditPin on Pinterest

One comment

Time limit is exhausted. Please reload CAPTCHA.

  1. Twan · March 5, 2013

    Fantastic! I was in desperate need for a slider and luckily came across your code, thank you so much!