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

Coleslaw

Answer 1

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))



       }
}

Federalist

This is better: line 1: let yPosition = (bounds.height - trackHeight) / 2 line 2: return CGRect(x: bounds.origin.x, y: yPosition, width: bounds.width, height: trackHeight) Otherwise the track is at the top of its container view instead of centered. – Ugo

Answer 2

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
       }
}

Bidet

Answer 3

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
}

Cloutman

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? – Hypoplasia

same here. Any fix for that? – Oblast

Answer 4

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))
    }
}

Strachan

Answer 5

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))
  }
}

Albers

Answer 6

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))
    } 
}

Deer

Answer 7

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

   }
}

Williams

Answer 8

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

- (CGRect)trackRectForBounds:(CGRect)bounds

Just return the new CGRect here.

Phonology

Answer 9

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.

Jahdiel

I think it's only changing the internal height if the slider, not the track height – Azriel