user1079052
user1079052

Reputation: 3843

Custom UISlider doesn't go to end

I have created a UISlider that has tick marks and snaps to each tick when the value is changed. The problem is that the slider doesn't naturally go to the ends and the left and right tick are visible outside of the circle. I have extended the UISlider class to go to the ends but the animation conflicts with moving the slider to the next tick and the circle ends up off the screen. How can I keep the snap to tick animation and have the circle in the slider go all the way to the end? Here is my code

class CustomSlider: UISlider {

    override func thumbRect(forBounds bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect
    {
        let unadjustedThumbrect = super.thumbRect(forBounds: bounds, trackRect: rect, value: value)
        let thumbOffsetToApplyOnEachSide:CGFloat = unadjustedThumbrect.size.width / 2.0
        let minOffsetToAdd = -thumbOffsetToApplyOnEachSide
        let maxOffsetToAdd = thumbOffsetToApplyOnEachSide
        let offsetForValue = minOffsetToAdd + (maxOffsetToAdd - minOffsetToAdd) * CGFloat(value / (self.maximumValue - self.minimumValue))
        var origin = unadjustedThumbrect.origin
        origin.x += offsetForValue
        return CGRect(origin: origin, size: unadjustedThumbrect.size)
    }
}

@IBOutlet weak var slider: CustomSlider!

let tickArray : [Float] = [Float(18),Float(20),Float(22),Float(24),Float(26),Float(28),Float(30)]

    override func viewDidLoad() {
        super.viewDidLoad()

        self.slider.value = tickArray[0]
        self.slider.minimumValue = tickArray[0]
        self.slider.maximumValue = tickArray[6]
        self.slider.isContinuous = false



        var tick : UIView
        for i in 0..<tickArray.count-1 {
            tick = UIView(frame: CGRect(x: (self.slider.frame.size.width/6) * CGFloat(i), y: (slider.frame.size.height - 13) / 2, width: 2, height: 13))
            tick.backgroundColor = "8E8E93".hexColor
            slider.insertSubview(tick, belowSubview: slider)
        }

        tick = UIView(frame: CGRect(x: self.slider.frame.size.width-2, y: (slider.frame.size.height - 13) / 2, width: 2, height: 13))
        tick.backgroundColor = "8E8E93".hexColor
        slider.insertSubview(tick, belowSubview: slider)

    }

    @IBAction func sliderValueChanged(_ sender: UISlider) {


            if sender.value > tickArray[5] {
                slider.value = tickArray[6]
            } else if sender.value > tickArray[4] {
                slider.value = tickArray[5]
            } else if sender.value > tickArray[3] {
                slider.value = tickArray[4]
            } else if sender.value > tickArray[2] {
                slider.value = tickArray[3]
            } else if sender.value > tickArray[1] {
                slider.value = tickArray[2]
            } else if sender.value >
                tickArray[0] {
                slider.value = tickArray[1]
            } else {
                slider.value = tickArray[0]
            }
    }

enter image description here

Upvotes: 2

Views: 743

Answers (1)

user1079052
user1079052

Reputation: 3843

I fixed my problem by hiding the left and right ticks when the slider goes to the edges. This took away the need for the slider extension.

Upvotes: 1

Related Questions