How to Change the UISlider to Vertical?

Question

I am customizing an UISlider for my app. I want the slider to be in vertical orientation, but the default UISlider is in horizontal orientation. I couldn't find how to change a UISlider's orientation.

How can I make a vertical slider in XCode?

score 49 · Accepted Answer · edited Jul 12 '14 at 09:19

49

By default, a UISlider is horizontal (--). If you wish to make it vertical (|) then you must do this programmatically, probably with a CGAffineTransform. For example, you can add this snippet to viewDidLoad or wherever you deem appropriate:

CGAffineTransform trans = CGAffineTransformMakeRotation(M_PI_2);
slider.transform = trans;

edited Jul 12 '14 at 09:19

Daniel S.

6,458
4
35
78

answered Nov 14 '11 at 06:31

PengOne

48,188
17
130
149

Hello IT's Work But One Problem I Want Upper Part Is Down Down Part Is Upper Understand – Hardik Vyas Oct 20 '15 at 09:50
1

hardik, just reverse the rotation. i.e. `CGAffineTransformMakeRotation(-M_PI_2)` – izzy Nov 13 '15 at 16:48

score 2 · Answer 2 · answered Mar 06 '14 at 07:10

In case you are using 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.

KLD · Answer 3 · 2014-06-03T18:16:27.403

I had a problem with :

CGAffineTransform trans = CGAffineTransformMakeRotation(M_PI_2);
slider.transform = trans;

because I had the code in ViewDidLoad method. Instead, I put the code in ViewDidAppear and it worked fine.

Edit: it doesn't have to be in the ViewDidAppear, ViewDidLoad works fine too (even better). You could disable auto-resize, or set a constraint for the slider you're rotating so the size doesn't change after rotation.

score 0 · Answer 4 · answered Feb 23 '22 at 14:08

0

For Swift 5

override func viewDidLoad() {
    super.viewDidLoad()
    // Turn Slider Vertical 
    myslider.transform = CGAffineTransform(rotationAngle: (CGFloat.pi / 2))

answered Feb 23 '22 at 14:08

LawlessLLC

35
6

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 23 '22 at 15:28

How to Change the UISlider to Vertical?

4 Answers4

Related