UISlider can be skinned to produce output like these:
There are three sections that you can change:
- The bar portion on the left side of the thumb, using setMinimumTrackImage:UIImage
- The bar portion on the right side of the thumb, using setMaximumTrackImage:UIImage
- The thumb, using setThumbImage:UIImage
For the UIImage, you will most likely need to stretch it to fit the width of the bar, so use [UIImage::stretchableImageWithLeftCapWidth] to do that. (For iOS 5 or later, use resizableImageWithCapInsets instead of stretchableImageWithLeftCapWidth)
Example 1:
slider_bar_other_skin.9.png
slider_other_thumb.png
UIImage* sliderBarImage = [UIImage imageNamed:@"slider_bar_other_skin.9.png"]; UIImage* sliderThumbImage= [UIImage imageNamed:@"slider_other_thumb.png"]; sliderBarImage=[sliderBarImage stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0]; //[slider setMinimumTrackImage:sliderBarImage forState:UIControlStateNormal]; [slider setMaximumTrackImage:sliderBarImage forState:UIControlStateNormal]; [slider setThumbImage:sliderThumbImage forState:UIControlStateNormal];
Result: Without calling setMinimumTrackImage, you see the slider has maintained the default blue bar. However, notice that the height of the bar is automatically matched to the height of the custom bar because of the call to setMaximumTrackImage.
Example 2
slider_bar_2.png
UIImage* sliderBarImage = [UIImage imageNamed:@"slider_bar_other_skin.9.png"]; UIImage* sliderThumbImage= [UIImage imageNamed:@"slider_other_thumb.png"]; sliderBarImage=[sliderBarImage stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0]; [slider setMinimumTrackImage:sliderBarImage forState:UIControlStateNormal]; [slider setMaximumTrackImage:sliderBarImage forState:UIControlStateNormal]; [slider setThumbImage:sliderThumbImage forState:UIControlStateNormal];
Example 3
slider_bar_3_min.png
slider_bar_3_max.png
slider_thumb_3.png
UIImage* sliderBarMinImage = [[UIImage imageNamed:@"slider_bar_3_min.png"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0]; sliderBarImage = [[UIImage imageNamed:@"slider_bar_3_max.png"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0]; sliderThumbImage= [[UIImage imageNamed:@"slider_thumb_3.png"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:0.0];; [slider3 setMinimumTrackImage:sliderBarMinImage forState:UIControlStateNormal]; [slider3 setMaximumTrackImage:sliderBarImage forState:UIControlStateNormal]; [slider3 setThumbImage:sliderThumbImage forState:UIControlStateNormal];
All three images are customized here. You can be creative with the thumb image to produce some unique look.