10

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?

KPM
  • 10,558
  • 3
  • 45
  • 66
tcurdt
  • 14,518
  • 10
  • 57
  • 72

7 Answers7

12

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

KPM
  • 10,558
  • 3
  • 45
  • 66
  • 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. – Sam Soffes Aug 19 '10 at 14:24
  • 7
    Passing nil doesn’t work, because the framework defaults to the default image when nothing is set. You actually have to use transparent images. – Rafael Bugajewski Mar 05 '11 at 21:13
  • if you are not going to change the look of trackImage when user change the value over time , this can be use – EFE Apr 06 '16 at 09:33
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];
Jun
  • 3,422
  • 3
  • 28
  • 58
  • `strechableImageWithLeftCapWidth:` is deprecated, `resizableImageWithCapInsets:` should be used instead which makes the whole thing much easier. – Q8i Sep 11 '13 at 14:54
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.

Can Berk Güder
  • 109,922
  • 25
  • 130
  • 137
1

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

Ed Marty
  • 39,590
  • 19
  • 103
  • 156
  • 1
    That's not really the problem here. The problem is that only 1 point width is being used to stretch the image. – tcurdt Apr 16 '09 at 17:01
  • 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. – Ed Marty Apr 18 '09 at 16:17
  • 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. – arlomedia Sep 02 '12 at 08:46
0

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.

Sam Soffes
  • 14,831
  • 9
  • 76
  • 80
0

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

nehaSingh
  • 71
  • 1
  • 7
0

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.

HitScan
  • 8,651
  • 3
  • 22
  • 17
  • 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. – HitScan Apr 19 '09 at 05:15