Home Ask Login Register

Developers Planet

Your answer is one click away!

John February 2016

set UIslider thumb image in swift

I want to set thumb of like musi app here is ss

I want

enter image description here

I have

enter image description here

Here is code

        durationSlider.setThumbImage(UIImage(named: "Slider_indicator.png"), forState: UIControlState.Normal)
    durationSlider.setThumbImage(UIImage(named: "Slider_indicator.png"), forState: UIControlState.Highlighted)


Crazy Developer February 2016

here you want to show only below part of the thumb now. so you need to make above half image clear. Please check the image i have attached with the answer

[slider setThumbImage:[UIImage imageNamed:@"1"] forState:UIControlStateNormal];

enter image description here

Try this and download scale the image if you need

dzk February 2016

If you want to clip the top part of the thumbImage, you should use:

public func thumbRectForBounds(bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect

So add this to your code:


And set the CGRect of the thumbRect to have the value of durationSlider.frame.origin.y as its own origin.y.

Here's another temporary solution, I'll get back to the thumbRectForBounds method shortly:

let mask = CAGradientLayer(layer: durationSlider.layer)
let lineTop = (durationSlider.bounds.height/2 - 0.5) / durationSlider.bounds.height
mask.frame = durationSlider.bounds
mask.colors = [UIColor.clearColor().CGColor, UIColor.blackColor().CGColor]
mask.locations = [lineTop, lineTop]
durationSlider.layer.mask = mask

Post Status

Asked in February 2016
Viewed 2,103 times
Voted 14
Answered 2 times


Leave an answer

Quote of the day: live life