Customize UISlider (track image height)

Question

I'm customizing a UISlider. I could set a custom thumb image that is higher than the usual thumb however I could not make the track higher when setting a higher minimum track image but the track height remained the same. It should be possible as in the iPod/Music App on the iPad the volume slider is also higher as the usual slider as you can see here:

_{(source: cocoia.com)}

score 24 · Answer 1 · answered Feb 15 '12 at 22:28

24

You need to subclass the slider and override the trackRectForBounds: method, like this:

- (CGRect)trackRectForBounds:(CGRect)bounds
{
    return bounds;
}

answered Feb 15 '12 at 22:28

antalkerekes

2,128
1
20
36

score 6 · Answer 2 · answered Jan 07 '16 at 14:50

6

The simplest solution for Swift:

class TBSlider: UISlider {

    override func trackRectForBounds(bounds: CGRect) -> CGRect {
        return CGRectMake(0, 0, bounds.size.width, 4)
    }
}

answered Jan 07 '16 at 14:50

Bartłomiej Semańczyk

59,234
49
233
358

score 4 · Answer 3 · answered Jul 15 '15 at 17:29

For those that would like to see some working code for changing the track size.

class CustomUISlider : UISlider
{        
    override func trackRectForBounds(bounds: CGRect) -> CGRect {
        //keeps original origin and width, changes height, you get the idea
        let customBounds = CGRect(origin: bounds.origin, size: CGSize(width: bounds.size.width, height: 5.0))
        super.trackRectForBounds(customBounds)
        return customBounds
    }

    //while we are here, why not change the image here as well? (bonus material)
    override func awakeFromNib() {
        self.setThumbImage(UIImage(named: "customThumb"), forState: .Normal)
        super.awakeFromNib()
    }
}

Only thing left is changing the class inside the storyboard:

storyboardstuff

You can keep using your seekbar action and outlet to the object type UISlider, unless you want to add some more custom stuff to your slider.

score 2 · Answer 4 · answered Nov 05 '11 at 01:03

2

use next methods setThumbImage, setMinimumTrackImage, setMaximumTrackImage

[self setThumbImage:[UIImage imageNamed:@"switchThumb.png"] forState:UIControlStateNormal];
    [self setMinimumTrackImage:[UIImage imageNamed:@"switchBlueBg.png"] forState:UIControlStateNormal];
    [self setMaximumTrackImage:[UIImage imageNamed:@"switchOffPlain.png"] forState:UIControlStateNormal];

and create subclass like this

- (id) initWithFrame: (CGRect)rect{
    if ((self=[super initWithFrame:CGRectMake(rect.origin.x,rect.origin.y,90,27)])){
        [self awakeFromNib];
    }
    return self;
}

answered Nov 05 '11 at 01:03

Volodymyr B.

3,369
2
30
48

strange, maybe i don't understand what you want? – Volodymyr B. Nov 08 '11 at 09:35
Again, doesn't work here. I'm guessing the supplied code is iOS5 only? (I'm using iOS4, and there's a few bits of UISlider that are iOS5 only) – Adam Dec 30 '11 at 15:51

score 1 · Answer 5 · answered Sep 03 '12 at 13:33

//use this code

 UIImage *volumeLeftTrackImage = [[UIImage imageNamed: @"video_payer_scroll_selection.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
        UIImage *volumeRightTrackImage= [[UIImage imageNamed: @"video_bar_bg.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
        [volumeslider setMinimumTrackImage: volumeLeftTrackImage  forState: UIControlStateNormal];
        [volumeslider setMaximumTrackImage: volumeRightTrackImage  forState: UIControlStateNormal];
        [volumeslider setThumbImage:[UIImage imageNamed:@"sound_bar_btn.png"] forState:UIControlStateNormal];
        [tempview addSubview:volumeslider];

Customize UISlider (track image height)

5 Answers5

Linked