CODEWITHSUNDEEP
iosiphoneswift
Frank Boccia
Frank Boccia

Reputation: 285

Change UISlider track color for multiple colors in swift?

Can I use the value I obtain(sender.value) to change the color as the slider moves? I am trying to change the color from green to yellow to red as the slider moves. Please help in swift thanks! 

let brokeSlider = UISlider(frame:CGRectMake(5, 440, 355, 20))
            brokeSlider.minimumValue = 0
            brokeSlider.maximumValue = 1
            brokeSlider.continuous = true
            brokeSlider.tintColor = UIColor.blackColor()
            brokeSlider.value = 0
            brokeSlider.addTarget(self, action: #selector(AnnotationPhotoWidget.sliderValueDidChange(_:)), forControlEvents: .ValueChanged)
            self.view.addSubview(brokeSlider)

    func sliderValueDidChange(sender:UISlider) {
            print("value--\(sender.value)")
    }

Upvotes: 7

Views: 18260

Answers (3)

Justin Vallely
Justin Vallely

Reputation: 6089

@ashimVerma's solution works great. To take it up a notch and get smooth color transitions, give this a whirl:

enter image description here

@objc func sliderValueDidChange(sender: UISlider) {
    let saturation = 0.9 // 0...1
    let lightness = 0.46 // 0...1

    let sliderPercentage = sender.value / sender.maximumValue
    let invertedPercentage = 1 - sliderPercentage
    let hue = CGFloat(invertedPercentage * 120 / 360)

    let brightness = lightness + saturation * min(lightness, 1 - lightness)

    var adjustedSaturation: CGFloat = 0.0
    if brightness > 0 {
        adjustedSaturation = 2 * (1 - lightness / brightness)
    }

    let trackColor = UIColor(hue: hue, saturation: adjustedSaturation, brightness: brightness, alpha: 1)
    brokeSlider.minimumTrackTintColor = trackColor
}

This works by utilizing the HSL color space where saturation and lightness are constant. So we only need to vary the hue (from green to red) based on a portion of the total hue range. We then convert those values to use UIColor's HSB initializer.

Reference: https://en.wikipedia.org/wiki/Hue

Even Simpler:

If you don't need to work in the HSL color space, this can be further simplified by directly setting the saturation and brightness values.

@objc func sliderValueDidChange(sender: UISlider) {
    let sliderPercentage = sender.value / sender.maximumValue
    let invertedPercentage = 1 - sliderPercentage
    let hue = CGFloat(invertedPercentage * 120 / 360)

    let trackColor = UIColor(hue: hue, saturation: 0.95, brightness: 0.87, alpha: 1)
    brokeSlider.minimumTrackTintColor = trackColor
}

Upvotes: 2

Ashish Verma
Ashish Verma

Reputation: 1818

Try the following code:

func sliderValueDidChange(sender:UISlider) {
     print("value--\(sender.value)")
     if sender.value <= 0.3 {
        brokeSlider.minimumTrackTintColor = UIColor.green
     } else if sender.value > 0.3 && sender.value <= 0.6 {
           brokeSlider.minimumTrackTintColor = UIColor.yellow
     } else {
          brokeSlider.minimumTrackTintColor = UIColor.red
     }
}

Upvotes: 12

FredLoh
FredLoh

Reputation: 1842

Try this:

import Foundation
import UIKit

class AnnotationPhotoWidget: UIViewController  {
    let brokeSlider = UISlider(frame:CGRectMake(5, 440, 355, 20))

    override func viewDidLoad() {
        brokeSlider.minimumValue = 0
        brokeSlider.maximumValue = 1
        brokeSlider.continuous = true
        brokeSlider.tintColor = UIColor.blackColor()
        brokeSlider.value = 0
        brokeSlider.addTarget(self, action: #selector(AnnotationPhotoWidget.sliderValueDidChange(_:)),forControlEvents: .
            ValueChanged)
        self.view.addSubview(brokeSlider)
    }

    func sliderValueDidChange(sender: UISlider) {
        if sender.value <= 0.3 {
            brokeSlider.minimumTrackTintColor = UIColor.greenColor()
        } else if sender.value > 0.3 && sender.value <= 0.6 {
            brokeSlider.minimumTrackTintColor = UIColor.yellowColor()
        } else {
            brokeSlider.minimumTrackTintColor = UIColor.redColor()
        }
    }
}

Upvotes: 2

Related Questions