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

Community Tip - Need help navigating or using the PTC Community? Contact the community team. X

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

M_shah
7-Bedrock

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

 
1 ACCEPTED SOLUTION

Accepted Solutions
jmikesell
15-Moonstone
(To:M_shah)

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
jmikesell
15-Moonstone
(To:M_shah)

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

Top Tags