Go from this…

To this!

I’m writing an app where I needed to make the thumb nub of a slider (UISlider in the Objective-C vernacular) smaller.

Above: On the left is the UISlider thumb normal size, story and on the right is the size I want. Obviously the pic is blown up.

To change the slider thumb to our custom image, decease place the following code in viewDidLoad:

UIImage *sliderThumb = [UIImage imageNamed:@”uislider-thumb.png”];
[slider setThumbImage:sliderThumb forState:UIControlStateNormal];
[slider setThumbImage:sliderThumb forState:UIControlStateHighlighted];

If you don’t add the second setThumbImage: forState:UIControlStateHighlighted, I believe the thumb pic will disappear when you put your finger on it. Not that you’d be able to tell, since your fingers will be covering it.

When I ran this code I ran into a weird issue, the track disappeared! This only happened in iOS 3.1.3 (where I tested it) but not on iOS 4.0. To remedy this I decided to go the whole way and customize the track images as well. Yes, images plural, there are actually two images that make up the UISlider track. One is the minimum image, or the track image that appears to the left of the thumb, and the other is the maximum image, or the image that appears to the right of the thumb.

To change the track image for the UISlider, use this code, again in viewDidLoad:

UIImage *sliderMinimum = [[UIImage imageNamed:@”uislider-left.png”] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
[slider setMinimumTrackImage:sliderMinimum forState:UIControlStateNormal];
UIImage *sliderMaximum = [[UIImage imageNamed:@”uislider-right.png”] stretchableImageWithLeftCapWidth:4 topCapHeight:0];
[slider setMaximumTrackImage:sliderMaximum forState:UIControlStateNormal];

A small note here, the leftCapWidth is the width of the left side of the image, and the track is a 1 pixel wide slice repeated horizontally across the width of the track, and then the rightCapWidth is the same as the leftCapWidth. This might lead you to believe that you can make an image that is a minimum of 3px wide. 1 pixel border on the left and right, and 1 pixel in the middle. I tried it, and it didn’t really work out too well, so what I ended up doing was making it 9 pixels wide and setting the leftCapWidth to 4.

That’s all you really need to get started customizing your sliders. Obviously you need to make a slider either in a NIB and hook it up in the .h/.m file, or do it programmatically in the .h/.m file.

Hope this helps!

This article was the jumping off point for me to customize the slider: http://www.applausible.com/blog/?p=250

This is what Kristy came downstairs to this morning.

Ruby sleeping on the sofa, cost
so lady-like.

Willow being a good girl, looking up sheepishly.

Go Away!

While dog-sitting Rufus, capsule I had a half-day at work so I decided to bring the dogs in.

Me and Rufus getting ready to go (Willow’s in the back peeking, grip and Ruby is already laying down)

Ruby’s ready for the ride

Although Rufus looks out of control in this photo, stuff in reality he is just yawning. Willow is being her usual dopey self.

I love when Ruby does this. She’s laying down, but resting her head on the back of the seat. Sometimes I can feel her breathing on my neck. Too funny!

Everybody’s enjoying the ride, nice and relaxed.

The elevator was a little crowded, but they handled it like champs.

I was able to sit in someone’s office (my cubicle wasn’t going to hold them! Here they are all laid out on the comforter from the car.

This was super-cute! Rufus poked his head between me and the desk, so I moved back, and Rufus crawled in there and snuggled up like he was in his cage. So cozy!

On the way home, Ruby knows the way!

Ruby finally relaxing using Willow as a pillow.

Ruby making sure we don’t get lost.