Change UISlider track color for multiple colors in swift?

Question

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

Are the minimumValue to addSubview lines inside viewdidload? — FredLoh, Jun 17 '16 at 19:46
Check out the sample class I posted, if its not inside viewDidLoad I'm not really sure where you're defining it. — FredLoh, Jun 17 '16 at 19:51
This can be achieved by checking the 2nd part of this answer https://stackoverflow.com/a/71575844/4833705. You can make the track colors of the slider clear, put the class from the answer behind/underneath it, then animate using the caLayer colors of your choice as it progresses — Lance Samaria, Mar 23 '22 at 16:44

score 11 · Accepted Answer · edited Nov 16 '22 at 23:43

11

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

edited Nov 16 '22 at 23:43

Justin Vallely

5,932
3
30
44

answered Jun 17 '16 at 19:23

Ashish Verma

1,776
1
16
27

No, Thanks for trying! I have also tried to do if brokeSlider.value = 0.3 {} / but I can't seem to get it working! @AshishVerma – Frank Boccia Jun 17 '16 at 19:32

score 2 · Answer 2 · answered Jun 17 '16 at 19:49

2

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

answered Jun 17 '16 at 19:49

FredLoh

1,804
18
27

Don't you think my answer was same as yours? – Ashish Verma Jun 17 '16 at 19:50
@AshishVerma it is, only difference would be the viewDidLoad – FredLoh Jun 17 '16 at 19:51
@AshishVerma It worked when I used apples UIslider in the story board, it didn't work when I created my own sliders as pictured above ^^^^, Thanks for the help guys! – Frank Boccia Jun 20 '16 at 16:40
@FredLoh Read Comment above, Thanks for the help! – Frank Boccia Jun 20 '16 at 16:40
But this wont change the value dynamically – danu May 07 '19 at 02:53

Justin Vallely · Answer 3 · 2022-11-17T20:25:07.680

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

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

Animated GIF is a nice touch :-) – clearlight Apr 03 '23 at 09:19 — clearlight, Apr 03 '23 at 09:19

Change UISlider track color for multiple colors in swift?

3 Answers3