cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about PTC Community Badges. Engage with PTC and see how many you can earn! X

Translate the entire conversation x

How to add vertical slider widget in right and left panel ?

M_shah
10-Marble

How to add vertical slider widget in right and left panel ?

 
ACCEPTED SOLUTION

Accepted Solutions

it would be nice if there was a vertical slider widget, but there is not.

 

You can turn the horizontal one via css, but it is not exactly elegant. Here is my code to turn one in the right side pane vertical. This is a class which goes in your Styles > Application. Then on the slider widget enter "rotate90" in the class field.

 

.rotate90 {
  transform-origin: 0% 100%; //set the rotate origin to the bottom left corner
  transform: rotate(90deg); //rotate it 90 degrees
  width: 350px; //the slider width is inherited from the right pane so it will be too small, force it to me "longer"
  left: 40px; //use to push it over to the right edge of the pane
  }

View solution in original post

2 REPLIES 2

it would be nice if there was a vertical slider widget, but there is not.

 

You can turn the horizontal one via css, but it is not exactly elegant. Here is my code to turn one in the right side pane vertical. This is a class which goes in your Styles > Application. Then on the slider widget enter "rotate90" in the class field.

 

.rotate90 {
  transform-origin: 0% 100%; //set the rotate origin to the bottom left corner
  transform: rotate(90deg); //rotate it 90 degrees
  width: 350px; //the slider width is inherited from the right pane so it will be too small, force it to me "longer"
  left: 40px; //use to push it over to the right edge of the pane
  }

Thank you so much @jmikesell

Announcements
Top Tags