Perspective Slider Low-to-High instead of High-to-Low

Is there a setting that will reverse the numbers on a vertical slider to go from Low at the Top and High at the bottom?
I have a vertical slider bound to a PDFViewer page and pageCount.
It’s strange and confusing to have the slider working opposite of the page movement.
There’s probably a property to do that but I can’t find it. Swapping the numbers and step -1 won’t do it.

What about just rotating the component 180 degrees?

1 Like

Do you mean rotating 180 degrees like this?

Screen Shot 2022-05-09 at 2.55.05 PM

Yes, though i didn’t have labels showing on mine so i see what you are saying. You could probably rotate the lables with CSS? I’m a total novice when it comes to that though.

Not showing the labels in the slider component and then manually adding your own might be a good compromise.

You can try this:

  1. Create a new style. I called mine sliderMarkText180.
  2. Go to Background | Background image and enter
    } .slider-mark-text{transform: rotate(180deg)} {
  1. Insert your vertical slider and set position.rotate.angle: 180deg.
  2. Enable style.clases: sliderMarkText180.

This will invert the marker text but will leave them on the left side of the slider rather than on the right.
From my experiments it seems to affect all the sliders in the view so it may not be a total solution for you.

1 Like

To avoid that, make your selector begin with .psc-{name-of-your-class}, then add the class to the component style.
You might need to slightly adjust the selector in some cases as well, depending on what the 'style' property is defined on.

If you want to put the labels back to the right of the slider, something like } .psc-offsetlabel .slider-mark-text { right: 40px} { could do it.

4 Likes