Custom UISlider using UIEdgedInset does not render well

Question

I'm trying to do a custom uislider using images (without a visible knob, i hide it when user can't edit and show it when he can) The problem is that the the side render perfectly but the right part is cute and doesn't seems to use the edges... Any idea how i can edit it ?

Actual code :

    let capLeft:CGFloat =  9
    let capRight:CGFloat = 9
    imageMin = imageMinimum?.resizableImage(withCapInsets: UIEdgeInsets(top: 0, left: capLeft, bottom: 0, right: capRight), resizingMode: .stretch)
    imageMax = imageMaximum
    slider.setMaximumTrackImage(imageMax, for: UIControlState())
    slider.setMinimumTrackImage(imageMin, for: UIControlState())

How it's rendering :

How it should render :

Minimum track image :

Maximum Tracking Image :

Do you have any idea ?

Please dont care about the colors, it's the shape that is important — Kevin Vacquier, Mar 31 '17 at 11:53
hmmm... do you have a thumb image? And, if the slider value is set to 100%, does the full-length image look correct? — DonMag, Mar 31 '17 at 12:09
Does not look good at 100%. And i use an enormous thumb the cover a lot so i can't really use it there to hide) — Kevin Vacquier, Mar 31 '17 at 12:21
Remove resizing mode . Try this imageMinimum?.resizableImage(withCapInsets: UIEdgeInsets(top: 0, left: capLeft, bottom: 0, right: capRight)) — jignesh Vadadoriya, Mar 31 '17 at 12:33
jignesh-vadadoriya : exactly the same (resizingMode: .stretch is default value) — Kevin Vacquier, Mar 31 '17 at 12:38

score 0 · Answer 1 · answered Mar 31 '17 at 12:50

I think there is a bit of confusion about Min and Max images with UISlider.

The Min image is drawn (and stretched) on the Left side of the Thumb. The Max image is drawn (and stretched) on the Right side of the Thumb.

Create a small, square solid red image - such as 16x16 - and assign it (without insets) to .setMaximumTrackImage. See how that ends up looking, as you go from low to high values.

Edit: I used NO insets on the Min image for this example...

Note: I used a 20x20 clear image for the Thumb in these caps.

That's one of the bleh i was winging about, i will seperate the grey from the black but that does not explain why the edges are "cut" — Kevin Vacquier, Apr 03 '17 at 07:11

Custom UISlider using UIEdgedInset does not render well

1 Answers1