Customizing UISlider look

Question

To customize the visual look of a UISlider you can set the thumb and track images. Part of the track images gets stretched to the appropriate with. From the documentation:

A stretchable region sits between two end cap regions. The end caps define the portions of the image that remain as is and are not stretched. The stretchable region is a 1-point wide area between the end caps that can be replicated to make the image appear longer.

Now the problem I have is that my stretchable region needs to be more than 1-point wide. (It's a pattern) Unfortunately the 1-point width seems to be hard coded in the SDK.

Anyone having an idea how to work around this? Or will I have to write my own slider from scratch for this?

Answer 1

Just use transparent images as track images, and put a UIImageView below :)

Answer 2

I know it's late answer.

But I solved the problem as the following:

4 is the width of the round cap in the png file.

UIImage *minimum = [UIImage imageNamed:@"slider_minimum.png"];
[slider setMinimumTrackImage:[minimum stretchableImageWithLeftCapWidth:4 topCapHeight:0]
                      forState:UIControlStateNormal];

Answer 3

I believe you'll have to write your own slider to do that. There seems to be no (public) API to change UISlider's behavior regarding the stretchable region.

Answer 4

You could just create the images to be as wide as you need them to be, with the pattern pre-rendered.

Answer 5

You need to initialize your image with stretchableImageWithLeftCapWidth:topCapHeight:. leftCapWidth and topCapHeight are read-only properties on image objects, but using that function you can set them. You only set the left and top because the left and right caps are the same size, and the top and bottom are also the same. So, to use a custom slider track with a left side size of 5 pixels, you need to have an image of 11 pixels wide, by whatever height you need: 5 for the left cap, 1 pixel wide that is stretched for the track, and 5 more for the right. Having not played with it, I don't know if using a topCapHeight greater than 0 works as expected, but I suspect it wouldn't cause a great deal of problems.

Answer 6

I wanted a pattern behind my UISlider. I ended up setting both images to nil and adding a view under the slider since I didn't need it to be different on either side of the thumb. This would be more difficult if you needed to change it based on the position, but quite doable.

Answer 7

to make your custom UISlider you have many ways. Depending on what customization you want. there are default properties you can set to customize your UIslider, like following: setThumbImage:forState: setMinimumTrackImage:forState: setMaximumTrackImage:forState: If you want further customization you can refer the below link https://medium.com/@0209neha/creating-a-custom-uislider-7756bf898832#.o1l4qhymo https://github.com/0209Neha/ExploringSlider