UISlider is a control used to select a single value from a continuous range of values.

Default UISlider view only provides track and thumb with default colour with minimum value to maximum value. You can drag the thumb to start point to end point continuously in the range set.

Default UISlider

enter image description here

If you are using this control in your project, as per the screen design you need to customise the control to make your screen attractive.

Let's Customise the UISlider now

You can customise colour, height, thumb image, minimum track and maximum track. Let's say we want to customise the color of the min track and max track, then you can set in two ways :-

1.) From the Attributes Inspector

enter image description here

You can also set the min and max value of the UISlider and min image and max image of the UISlider from Attributes Inspector. As well you can also do it programmatically.

2.) Programmatically in the viewDidLoad()

slider.minimumTrackTintColor = .red
slider.maximumTrackTintColor = .gray

Increase the Height of the UISlider

Now, let's customise the height of the UISlider. For this you need to make a custom class of the UISlider controller and write the following code :-

class CustomSlider: UISlider {

    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        let customBounds = CGRect(origin: bounds.origin, size: CGSize(width: bounds.size.width, height: 5.0))
        super.trackRect(forBounds: customBounds)
        return customBounds


You can adjust the height of the UISlider as per your choice.

Add the thumb image to UISlider

Now, let's also change the thumb image of the UISlider to look more attractive, write in viewDidLoad() block :-

slider.setThumbImage(UIImage(named:"sliderThumb"), for: .normal)
slider.setThumbImage(UIImage(named:"sliderThumb"), for: .highlighted)

If you don't set the same image for the normal and highlighted state then when you touch the UISlider to drag the thumb then the default thumb image will display.

Add label to the thumb image of the current value

How about if we add an label of the current value of the thumb in UISlider as we move the thumb the value also move it.

First you need to take the action outlet of the value changed of the UISlider in your swift file. for example :-

@IBAction func sliderValueChanged(_ sender: UISlider) {
    let x = Int(round(sender.value))
    lblSliderValue.text = "\(x)"
    lblSliderValue.center = setUISliderThumbValueWithLabel(slider: sender)

lblSliderValue is the UILabel outlet in which the value of the UISlider is stored and there is one custom method to set the label in the center of the thumb.

func setUISliderThumbValueWithLabel(slider: UISlider) -> CGPoint {
    let slidertTrack : CGRect = slider.trackRect(forBounds: slider.bounds)
    let sliderFrm : CGRect = slider .thumbRect(forBounds: slider.bounds, trackRect: slidertTrack, value: slider.value)
    return CGPoint(x: sliderFrm.origin.x + slider.frame.origin.x + 8, y: slider.frame.origin.y + 20)

The Final output will be like this :-

enter image description here

Your comment