// Create sliders
var verticalSlider = Titanium.UI.createSlider({max:100, min:-100, height:100, top:0});
var horizontalSlider = Titanium.UI.createSlider({max:100, min:-100, width:100, top:100});

// setup rotate transform matrix
var t3 = Ti.UI.create2DMatrix();
t3 = t3.rotate(-180);

// Rotate the vertical scrollbar
verticalSlider.transform(t3);

// Insert sliders
DanWindow3.add(verticalSlider);
DanWindow3.add(horizontalSlider);

11 Answers

• var verticalSlider = Titanium.UI.createSlider({max:100, min:-100, height:100, top:0});
  verticalSlider.transform = Ti.UI.create2DMatrix().rotate(-90);
  

  Add that, and you should be done… skip the var t3= etc… stuff - it's not needed for a simple transform like this.

  It'll show up vertical when you add it - no animation/etc..

• See this thread - assign the transform to the transform property:

  var slider = Ti.UI.createSlider({ ... });
  
  slider.transform = Ti.UI.create2DMatrix().rotate(90);
  

  You'll need to experiment with the positioning of the slider once it's been rotated.

• Have you tried to first add the slide and then transforming it?

• Thankyou for your suggestions, sadly no luck. I found the kitchen sink js file, and amended it to my needs (as below), but still it just shows them horizontally.

  // Create sliders
  var verticalSlider = Titanium.UI.createSlider({max:100, min:-100, height:100, top:0});
  var horizontalSlider = Titanium.UI.createSlider({max:100, min:-100, width:100, top:100});
  
  // setup rotate transform matrix
  var t3 = Ti.UI.create2DMatrix();
  t3 = t3.rotate(-180);
  
  // Insert sliders
  DanWindow3.add(verticalSlider);
  DanWindow3.add(horizontalSlider);
  
  // Rotate the vertical scrollbar
  verticalSlider.transform(t3);
  var a2 = Titanium.UI.createAnimation();
  a2.transform = t3;
  a2.duration = 1;
  verticalSlider.animate(a2);
  

• Thankyou James, but sadly that didn't help. I am testing this using android APIs 2.1 at present. I switched between loading the window before and after the transform but still no luck with it.

  The code I used after your comment was:

  // Create sliders
  var verticalSlider = Titanium.UI.createSlider({max:100, min:-100, height:100, top:0});
  //var horizontalSlider = Titanium.UI.createSlider({max:100, min:-100, width:100, top:100});
  
  // setup rotate transform matrix
  verticalSlider.transform = Ti.UI.create2DMatrix().rotate(90);
  
  // Insert sliders
  DanWindow3.add(verticalSlider);
  //DanWindow3.add(horizontalSlider);
  

• Just saw you where testing on android,

  Animations, 2D or 3D aint supported on android, or they just aint working. At least in none of my projects android animatiosn work… took ma hours to discover why my app worked fine on an iPhone but didnt on an android device.

• Thanks for that info. Glenn, worth knowing for the future aswell. Shame that doesn't work in Android, could prove a big issue for me in future. But for now, I am not too worried about the animation part, just wanted it rotated, the user doesn't need to see this.

  Is this still possible, or shall I just forget about it on Android?

• I've been struggling with this major issue for the past 9 months, and now my app is all finished, ready to be released on market, once this silly bug is fixed. I have only tested on Android, not iPhone, and didn't realize that it's specifically a problem with Android, which is my target platform. Please please please, one of you awesome developers out there, help fix this 2DMatrix transform problem. Don't even need it in an animation, would just like to implicitly apply the rotate on an ImageView to create a spin or starting point. I wish we can just do an imageView.transform = MatrixTransform; directly instead of through an Animation. It's been addressed in many forum threads, one I can point to is http://developer.appcelerator.com/question/10181/multiple-rotates-of-view-with-animation-part-2
  and I created a related ticket at https://appcelerator.lighthouseapp.com/projects/32238/tickets/1457-rotate-transform-animate-flickers-to-rotate-0-with-each-turn ..
  Seems to be no current workarounds yet as of yet. Please, help us overcome this seemingly simple limitation for the next beta release…. It's been a giant pain in the patudy, and I'd hate to abandon my Titanium app and rebuild it in Java, C++ or Flash AIR because of this to make my deadline. Thanks.

• hrrmm. I'm using Droid 2.2 with same issues. From searching around it looks like this is an issue for a few developers. I can create a view (I tried normal view and also image view), and animate with transform. However the following issues make it hurt my brain:

  1. If I animate again, I start from the original transform or non-transformed instead of the last position/value for a very awkward animation sequence.
  2. If I apply the transform to the view directly, no visible change occurs (I'm hoping to apply transforms to views directly without the animation personally.)

  Thanks for continuing to look into this. :)

• Did anyone come to a solution in this problem? Tell us about it in that case! I'm in the same situation.. Would like a slider to operate in vertical mode…

• You can find the 2DMatrix example under the 2d_transform.js file in kitchensink.

  As far as i know, every transform/animation is timebased, so i think you need to add an animation with a duration of 1.

  Atleast thats how i did all my rotating stuff.