How to make a vertical UISlider?

Question

I want to use a vertical UISlider. I have no idea about how, so please help me.

Adornment

This is a duplicate of this question asked yesterday: #2370426 – Ripply

Answer 1

You have to do this programaticaly. Assuming your UISlider is bound to a variable called slider, add this code in your viewDidLoad method in ViewController.m:

- (void)viewDidLoad {

    [super viewDidLoad];

    CGAffineTransform trans = CGAffineTransformMakeRotation(M_PI * 0.5);
    slider.transform = trans;
}

Let me know if you need any more help on this..

Anson

This places the minimumValue end at the top. Use M_PI * -0.5 to place the minimumValue end at the bottom. – Fragonard

After transforming, how to track the rect of thumb position while sliding? – Meta

M_PI is the constant defined to represent the value of the mathematical constant Pi that you learned in school (22/7). – Anson

@Anson do you have any idea how to transform the thumb image the same way in order to appear the shadow on the correct position? – Hermilahermina

Answer 2

As of Xcode 4.2, you can sort of do the same in Interface Builder.

• Create a slider
• Show the "Identity Inspector"
• Add a "User Defined Runtime Attribute"
• Set the key path to "layer.transform.rotation.z", the type as "String" ("Number" won't allow floating point values) (possible since Xcode 5) and the value to "-1.570795" (-π/2).

Unfortunately, it will still appear as horizontal in Interface Builder.

But you can position the center and don't need to create a custom class, so it might be useful enough in some cases. The effect is the same as ravinsp's code.

Beyer

Actually you can put float into Number with comma (instead of dot). – Brainwork

Answer 3

Swift 3:

slider.transform = slider.transform.rotated(by: CGFloat(0.5 * Float.pi))

// Use 1.5 to invert the shadow of slider if you want

Mclaren

Answer 4

In case you work with auto layouts:

In your viewDidLoad, try:

UIView *superView = self.sizeSlider.superview;
[self.sizeSlider removeFromSuperview];
[self.sizeSlider removeConstraints:self.view.constraints];
self.sizeSlider.translatesAutoresizingMaskIntoConstraints = YES;
self.sizeSlider.transform = CGAffineTransformMakeRotation(M_PI_2);
[superView addSubview:self.sizeSlider];

It does not work with constraints, so the trick is to remove the constraints for your uislider. You might have to resize it manually by setting its frame property.

Kiesha

It does work with constraints if the only constraints you set are centerX, centerY, and width. – Laconic

Answer 5

Using an IBOutlet and setter observers. If you want the max to be at the bottom, divide pi by positive 2

@IBOutlet weak var slider: UISlider! {
    didSet {
        slider.transform = CGAffineTransform(rotationAngle: .pi / -2)
    }
}

Stalinism