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

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

SOLVED
Regular Member

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

 
1 ACCEPTED SOLUTION

Accepted Solutions

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

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

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

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

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

Thank you so much @jmikesell