de

1. Create a new view based application

2. Add the IBOutlets for the UISliders

In the .h file add:

@interface deCustomSliderViewController : UIViewController {

IBOutlet UISlider *slider1;
IBOutlet UISlider *slider2;

}

3. Setup the Interface.

Add a couple sliders to deCustomSliderViewController.xib

And then add the IBOutlet Link – You will only need to do one of these.

4.Now its time to make them pretty!

Add your image resources to the project resources folder. You will need one for the bar and one for the knob (the slider bit you touch). I have attached some at the end of this post.

I am using these (credit http://www.mynameise.com/renn and http://365psd.com/day/27/) :

5. Add the UI Code

The final step is just linking the resources to the IBOutlets. Add the following code in your viewDidLoad or viewWillLoad

//Slider Images
UIImage *stetchLeftTrack = [[UIImage imageNamed:@"slider-bg.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
UIImage *stetchRightTrack = [[UIImage imageNamed:@"slider-bg.png"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];

//Slider: Top
slider1.backgroundColor = [UIColor clearColor];        
[slider1 setThumbImage: [UIImage imageNamed:@"slider-knob.png"] forState:UIControlStateNormal];
[slider1 setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[slider1 setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
slider1.minimumValue = 0.0;
slider1.maximumValue = 100.0;
slider1.continuous = YES;
slider1.value = 20.0;

//Slider: Middle
slider2.backgroundColor = [UIColor clearColor];        
[slider2 setThumbImage: [UIImage imageNamed:@"slider-knob.png"] forState:UIControlStateNormal];
[slider2 setMinimumTrackImage:stetchLeftTrack forState:UIControlStateNormal];
[slider2 setMaximumTrackImage:stetchRightTrack forState:UIControlStateNormal];
slider2.minimumValue = 0.0;
slider2.maximumValue = 100.0;
slider2.continuous = YES;
slider2.value = 50.0;

Thats it! It wasn’t too hard at all hey! Run your app and checkout your new sliders. Mine Looks like this:

And thats it!

Downloads: