Search code examples
iosswiftuislider

UISlider MaximumTrackImage clips when slider has extreme max values

I've dragged a UISlider to my view using Xcode's storyboard. Then I made an outlet and customised slider's appearance (in Swift) as follows:

slider.setMinimumTrackImage(UIImage(named: "Images/slider_min.png")?.stretchableImageWithLeftCapWidth(3, topCapHeight: 0), forState: UIControlState.Normal)
slider.setMaximumTrackImage(UIImage(named: "Images/slider_max.png")?.stretchableImageWithLeftCapWidth(3, topCapHeight: 0), forState: UIControlState.Normal)
slider.setThumbImage(UIImage(named: "Images/slider_thumb.png"), forState: UIControlState.Normal)
slider.setThumbImage(UIImage(named: "Images/slider_thumb.png"), forState: UIControlState.Highlighted)

The slider is stepped so possible values are integers ∈ [1,12].

These are the referenced images, they are transparent PNGs:
slider_min.png slider_max.png slider_thumb.png

I'm having problems with the two biggest possible values (11, 12): the MaximumTrackImage clips for some reason. This is what happens:

custom UISlider with different values

  1. Initial, minimum position, value = 1
  2. Last OK position, value = 10
  3. First position where the clipping occurs, value = 11
  4. Maximum position, still clipping, value = 12

Why this happens? Can this be fixed or are there any workarounds?

Solution

  • Oh well, it seems the problem was with the MaximumTrackImage—it was unnecessarily wide. I cropped the track images to be 6 px in width and the problem disappeared.

    Cropping the MaximumTrackImage was sufficient, but cropping the MinimumTrackImage too didn't hurt.