UISlider layout ignoring width

Question

I need to add a pop up view with a UILabel and a UISlider, but I am having trouble setting the width of the UISlider.

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        frontPanel = UIView()
        frontPanel!.backgroundColor = UIColor.whiteColor()
        frontPanel!.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(frontPanel!)

        valueSlider = UISlider()
        valueSlider!.translatesAutoresizingMaskIntoConstraints = false
        valueSlider!.frame = CGRect(x: 0,
                                    y: 0,
                                    width: frontPanel!.frame.width - 16,
                                    height: 35)

        sliderLabel = UILabel()
        sliderLabel!.translatesAutoresizingMaskIntoConstraints = false

        sliderLabel!.text = "Adjust value"

        let frontPanelSubviews: [String : AnyObject] = [
            "label" : sliderLabel!,
            "slider" : valueSlider!
        ]

        frontPanel!.addSubview(sliderLabel!)
        frontPanel!.addSubview(valueSlider!)

        frontPanel?.addConstraints(
            NSLayoutConstraint.constraintsWithVisualFormat("V:|-[label]-[slider]-|",
            options: [],
            metrics: nil,
            views: frontPanelSubviews)
        )
        frontPanel?.addConstraints(
            NSLayoutConstraint.constraintsWithVisualFormat("H:|-[label]-|",
            options: [],
            metrics: nil,
            views: frontPanelSubviews)
        )
        frontPanel?.addConstraints(
            NSLayoutConstraint.constraintsWithVisualFormat("H:|-[slider]-|",
            options: [],
            metrics: nil,
            views: frontPanelSubviews)
        )

    }

    override func viewDidLayoutSubviews() {
        frontPanel?.frame = CGRect(x: 0,
                                   y: view.frame.height - 75,
                                   width: view.frame.width,
                                   height: 75)
    }

    @IBOutlet weak var backPanel: UIView!
    @IBOutlet weak var valueLabel: UILabel!

    var frontPanel: UIView?
    var valueSlider: UISlider?
    var sliderLabel: UILabel?
}

In this example, the UISlider will always get the same width as the UILabel.

If I only use a horizontal layout contraint like H:|-[label]-[slider]-| the UISlider gets width == 0.

How can I make the UISlider use the full width of the parent view (minus the 8 points space on each side)?

Answer 1

frontPanel!.translatesAutoresizingMaskIntoConstraints = true

frontPanel is a subview of ViewController.view and you set exact frame. In my understanding is as follows.