How to Make Uislider Default Thumb to Be Smaller Like the Ones in the iOS Control Center

UIslider thumb image doesn't start from the beginning

What you're seeing is normal. The slider leaves some extra space at both ends, so that the thumb is at minimum or maximum value when the edge of the thumb is at the end of the slider frame.

Look at these sliders. They have the same horizontal positions and width:

The first slider's thumb is as far to the left as it will go. It doesn't go further left, outside the frame of the track; it stops when its edge hits the the frame of the track. That is zero.

If you don't like where the thumb image is being drawn in relation to the overall track, you'll need to subclass UISlider and implement thumbRectForBounds:trackRect:value:.

How to make a custom UISlider iOS?

You'll have to do a bit of work, but you shouldn't need to build a complete solution from scratch.

Adding your labels will be trivial - pretty basic usage of UISlider

"Stretching" a track image (or tint color) left and right of center as your animation shows will be a little tricky, as the UISlider control has only a track / background image and a "current" image that stretches on the left-hand side.

One approach would be to set the UISlider track images to transparent or hidden and then "overlay" the slider on top of your "full line" and your "blue line". When the slider value changes (as it is dragged), change the frame of the blue line.

Using auto-layout and constraints would make that pretty straight-forward.

Edit: A really quick example. The "thumb" is purposefully moved below the "custom slider bar" to show the images...

And, this is the code to get that:

import UIKit

class SliderViewController: UIViewController {

    // @IBOutlets needed, but I'm just showing the "code" here
    // ...

    @IBAction func sliderValueChanged(_ sender: Any) {

        if let s = sender as? UISlider {
            updateSlider(pct: CGFloat(s.value))
        }

    }

    func updateSlider(pct: CGFloat) -> Void {

        let p = (pct - 0.5) * 2.0

        theValueLabel.text = String(format: "%0.1f", p * 10)

        leftSideValueWidth.constant = p >= 0.0 ? 0.0 : (leftSideHolderView.frame.size.width * (-p))
        rightSideValueWidth.constant = p >= 0.0 ? (rightSideHolderView.frame.size.width * p) : 0.0

    }

    override func viewDidLoad() {
        super.viewDidLoad()

        // init slider to center
        updateSlider(pct: 0.5)

        // set default left- and right-side "track" images to empty images
        theSlider.setMinimumTrackImage(UIImage(), for: .normal)
        theSlider.setMaximumTrackImage(UIImage(), for: .normal)

    }

}

Black UIView for the frame... Gray UIView for the "slider bar"... two transparent UIView for the left- / right- side framing... two blue UIView - one for each side. And a standard UISlider control. That's about it.

You could also set a custom Thumb image, if the default one is too big for your needs.

Related Topics