How to customise UISlider height

Question

I have project in which have to customise UISlider element. I wondering if someone knows how to change, or is it possible to change height of UISlide bar line.

I tried something like this but don't work:

let customBounds = CGRect(origin: bounds.origin, 
                          size: CGSize(width: bounds.size.width, height: 15.0))
feedbackSlider.trackRectForBounds(customBounds)

Thanks

score 24 · Answer 1 · edited Aug 24 '16 at 16:10

24

i hope that you want edit it in storyboard, and only the line size, use it in your custom UISlider

class CustomSlide: UISlider {

     @IBInspectable var trackHeight: CGFloat = 2

     override func trackRectForBounds(bounds: CGRect) -> CGRect {
         //set your bounds here
         return CGRect(origin: bounds.origin, size: CGSizeMake(bounds.width, trackHeight))



       }
}

edited Aug 24 '16 at 16:10

Eduardo Oliveros

863
9
20

answered Aug 24 '16 at 16:07

Learn Swift

570
5
15

score 14 · Answer 2 · edited Jul 26 '18 at 12:27

Overriding trackRect is a way to go, however if you're using additional UISlider's views like minimumValueImage, maximumValueImage you would also need to take their bound into account, otherwise they will overlap with slider’s track. As a shortcut you can simply use super's func:

Fixed version.

Swift 3+

 @IBDesignable
    class CustomSlider: UISlider {
       /// custom slider track height
       @IBInspectable var trackHeight: CGFloat = 3

       override func trackRect(forBounds bounds: CGRect) -> CGRect {
           // Use properly calculated rect
           var newRect = super.trackRect(forBounds: bounds)
           newRect.size.height = trackHeight
           return newRect
       }
}

ronan · Answer 3 · 2015-07-23T15:18:35.550

9

You can override a method in you custom slider

For Objective-C

- (CGRect)trackRectForBounds:(CGRect)bounds {
    CGRect rect = CGRectMake(0, 0, 100, 30);//change it to any size you want
    return rect;
}

For Swift

override func trackRectForBounds(bounds: CGRect) -> CGRect {
    var rect:CGRect = CGRectMake(0, 0, 100, 30)
    return rect
}

edited Jul 23 '15 at 15:18

answered Jul 23 '15 at 15:09

ronan

1,611
13
20

13

when i use this code, the height of the slider successfully changes. but when the slider gets to the end, the rounded corner 'flashes' square. it seems this code is not accounting for the rounded corner at the end of a slider. any idea how to do that? – haplo1384 Feb 03 '16 at 15:53
same here. Any fix for that? – netshark1000 Nov 12 '18 at 13:10

score 6 · Answer 4 · answered Nov 23 '16 at 19:32

Swift 3

class MySlide: UISlider {

    @IBInspectable var height: CGFloat = 2        
    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(origin: bounds.origin, size: CGSize(width: bounds.width, height: height))
    }
}

score 6 · Answer 5 · answered Mar 22 '18 at 12:22

Swift 4 version without thumbImage.

class CustomSlider: UISlider {
  @IBInspectable var trackHeight: CGFloat = 2

  override func trackRect(forBounds bounds: CGRect) -> CGRect {
    return CGRect(origin: bounds.origin, size: CGSize(width: bounds.width, height: trackHeight))
  }
}

score 2 · Answer 6 · answered Oct 29 '20 at 08:46

I think the answers above have a flaw: the origin of the track rect must be offset to account for the change in height of the track, otherwise it will show up off-center. Here is the way I did it:

class CustomSlider: UISlider {

@IBInspectable var sliderTrackHeight : CGFloat = 2

    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        let originalRect = super.trackRect(forBounds: bounds)
        return CGRect(origin: CGPoint(x: originalRect.origin.x, y: originalRect.origin.y + (sliderTrackHeight / 2)), size: CGSize(width: bounds.width, height: sliderTrackHeight))
    } 
}

score 1 · Answer 7 · answered Jul 23 '15 at 14:34

1

U can easily get it done by subclassing UISlider. see following code

class CustomUISlider : UISlider
{        
    override func trackRectForBounds(bounds: CGRect) -> CGRect {
    //set your bounds here
    return bounds

   }
}

answered Jul 23 '15 at 14:34

iAnurag

9,286
3
31
48

score 0 · Answer 8 · answered Jul 23 '15 at 14:29

0

You should be able to subclass the UISlider and then implement:

- (CGRect)trackRectForBounds:(CGRect)bounds

Just return the new CGRect here.

answered Jul 23 '15 at 14:29

pnavk

4,552
2
19
43

score -1 · Answer 9 · answered Jul 23 '15 at 14:29

-1

If you're using autolayout you can set a height constraint on the UISlider in the storyboard. if you need to change it at runtime - create an IBOutlet for the constraint and modify its .constant value.

answered Jul 23 '15 at 14:29

Robert J. Clegg

7,231
9
47
99

1

I think it's only changing the internal height if the slider, not the track height – Roi Mulia Aug 06 '17 at 09:35

How to customise UISlider height

9 Answers9

Linked