To add a volume slider, we will need to import the sliderBase.png and sliderHandle.png files into our project.

Right after where we added the toggle button to mute the audio, we will add the following code:

        //slider
        CCSpriteFrame *sliderBase = [CCSpriteFrame frameWithImageNamed:@"sliderBase.png"];
        CCSpriteFrame *sliderHandle  = [CCSpriteFrame frameWithImageNamed:@"sliderHandle.png"];

        CCSlider *slider = [[CCSlider alloc]initWithBackground:sliderBase
          andHandleImage:sliderHandle ];

        slider.position = CGPointMake(winSize.width * 0.5 - slider.contentSize.width/2, winSize.height * 0.2);
        [self addChild:slider];

        [slider setTarget:self selector:@selector(onVolumeChanged:)];

        slider.continuous   = YES;
        slider.sliderValue = [[OALSimpleAudio sharedInstance] bgVolume];

A slider has two components, which are as follows:

The images for the base and handle are stored in variables named sliderBase and sliderHandle of the CCSpriteFrame type.

Then, we will actually create the slider of the CCSlider type, in which two parameters are passed. The first is the CCSpriteFrame base, and the other is sliderHandleSpriteFrame.

The slider will then be positioned and added to the scene.

Similar to the buttons, we have to assign a control function that takes care of the actual logic to get and set the volume and slider positions. We will call this function onVolumeChanged, which we will create shortly.

In the next two steps, we will set the slider.continous parameter to yes. This will immediately change the value of the volume as soon as the handle is moved. If it is set to no, the volume will be updated only after the finger is removed from the handle.

The slider.sliderValue variable will store the current value of the volume. The value of the volume is retrieved from the bgVolume property of the OALSimpleAudio shared instance.

Now, let's move on to creating the onVolumeChanged function, in which the actual logic is implemented. Execute the following code:

-(void)onVolumeChanged:(id)sender{


  CCSlider * slider = (CCSlider*)sender;

  [[OALSimpleAudio sharedInstance] 
    setEffectsVolume:slider.sliderValue];

  [[OALSimpleAudio sharedInstance] 
    setBgVolume:slider.sliderValue];

}

In the function, we will first typecast the sender to the CCSlilder* type and store it as a variable called a slider of the CCSlider* type.

In the next two lines, we will set the current sliderValue variable to the setEffectsVolume and setBgVolume properties of the shared audio instance.

If you wish, you can create separate volume sliders for bgVolume and effectsVolume. Alternatively, you can set the value of just bgVolume instead of affecting both bgVolume and effectsVolume.

As an added bonus, to let the player know that this is the slider for the volume, let's add a label suggesting this. Add the following code to the init function after adding the code for the slider:

CCLabelTTF *volumeLabel = [CCLabelTTF labelWithString:@"Volume" fontName:@"AmericanTypewriter-Bold" fontSize: 24.0f];

volumeLabel.position = CGPointMake(winSize.width/2, winSize.height * 0.27);
[self addChild:volumeLabel];

volumeLabel.shadowColor = [CCColor colorWithRed:0.0 green:0.0 blue:1.0];
volumeLabel.shadowOffset = ccp(1.0, 1.0);

volumeLabel.outlineColor = [CCColor colorWithRed:1.0 green:0.0 blue:0.0];
volumeLabel.outlineWidth = 2.0;

Now, run the game and move the slider handle to increase and decrease the volume.