Making the slider vertical

Questions about Thunkable
1

How do you make the slider vertical, or potentially create a vertical slider in a different way?

2

bring toggle menu bar to any button
try and tell

3

So that when someone swipes it gets detect?

Are there no ways to change rotating settings to rotate the slider component?

4

can u tell clearly

5

image
image1184Ă—861 31.4 KB

How do change these settings so that the slider rotates?

6

may be testing on phone would work
it says i cant say anything

7

I have tried, but not succeeded yet. What are the right settings and is it the slider, column or row that is supposed to transform?

8

Put the slider in a column or row, depending on your layout you want. Then in the property, select rotate. and in the figure, add in the angle you want to rotate and press “add”. (the angles are in units of Radians, i.e pi Rad = 180 deg)

9

I am so sorry, I must somehow be doing this wrong, and just don’t understand what.

image
image970Ă—790 32.1 KB
image
image1113Ă—817 28.8 KB

These are the settings I have for the slider

Here is the link Thunkable

10

OK. I found out you do not need to put the slider in the column/row component. From what I see above you are correct. with the “rotate”:1.5. change the “perspective” to rotate. Then view the change on the phone. I think it won’t appear correctly on the live test webapp.

1 Like
11

I tried it: just use “rotateZ” for a component, value: 1,5707963. It does not show on the designer screen, but in live preview (and hopefully in the app).

1 Like
12

Can you please share your copy? I tested your setting suggestion, but mine does not work in live test nor on published pwa

13

https://x.thunkable.com/projects/5f2a529a59f8dd8fec3c14d7/b8ef8ff2-ec2c-45ea-b6e3-e5ef20b59bff/designer

The same settings you have. worked on the phone. that’s all it mattered right? unless you are publishing a web app?

1 Like
14

Simply spoken:

  • click on a component in designer screen
  • select “advanced settings”
  • at “Transform” click on “rotateZ”
  • enter value “1.57079632679” (be careful to use a dot as a decimal separator)
  • click on “Add”
    Now the component shows up rotated by 90°:

grafik
grafik292Ă—601 7.03 KB

1 Like
15

First thank you so much for helping. I now see that even the link I sent work, the issue is related to publishing it as a mobile web app. It is not rotating there… If anyone know about a workaround for this please let me know

16

Some properties is not implemented correctly on the webapp, such as label alignment properties. Recently the managed the fix the column and row alignment properties. You may have to submit a github report on it.