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?

Scruff

Answer 1

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.

Recrimination

Answer 2

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

Gilbertine

You can simply set [self setMinimumTrackImage:nil forState:UIControlStateNormal]; [self setMaximumTrackImage:nil forState:UIControlStateNormal]; instead. If you this, you'll need to also set [self setThumbImage:[UIImage imageNamed:@"whatever.png"] forState:UIControlStateNormal]; too. – Fireside

Passing nil doesn’t work, because the framework defaults to the default image when nothing is set. You actually have to use transparent images. – Up

if you are not going to change the look of trackImage when user change the value over time , this can be use – Sternum

Answer 3

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];

Southern

strechableImageWithLeftCapWidth: is deprecated, resizableImageWithCapInsets: should be used instead which makes the whole thing much easier. – Scruple

Answer 4

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

Molest

That's not really the problem here. The problem is that only 1 point width is being used to stretch the image. – Scruff

But couldn't you just use a non-strechable image? Just create an image that's 480px wide that looks like you want it to, and use that image. – Molest

This works if you have a fixed width for your slider. If you need a variable width, you can make the images larger than the largest size needed, but then the minimum end of the slider when the thumb is at the minimum, and the maximum end of the slider when the thumb is at the maximum, don't display the end part of their images. The images are just cut off square at the point where they would extend beyond the length of the slider. – Reahard

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.

Enfeeble

Oops. I was thinking that it was only using 1 pixel for your left and right ends. Reading the documentation that way does sound like you'll have to roll your own. – Enfeeble

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.

Fireside

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

Haileyhailfellowwellmet