This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Ban Nguyen
Posted Jan 06 - Read on Facebook

anyone know how to change this to vertical slider (top red to yellow bottom? I am using the sample from @benjaminnathan http://share.framerjs.com/cu88bfkn0avj/.

@arronhunt suggested hue.rotation = 90, anyone knows how to change the knob to vertical direction? http://share.framerjs.com/epwwhjcjnrej/

4 Comments

Jordan Robert Dobson

Ban - try making the width less than the height. I think that's what you need. :D

Johannes Eckert

This is a good case — I currently need a diagonal slider — slider.rotation = 45 does work OK, but it's not perfect.
The drag interaction doesn't account for the rotated coordinate system of the slider, this becomes obvious at slider.rotation = 90

I don't know what the solution for this would be, but it's a really interesting case to me.
http://share.framerjs.com/a18vefhen6ds/

Or maybe there's way to allow an object to be only dragged diagonally? How would I approach something like that? Trigonometry and overwriding the drag position of a draggable object? Jordan, any quick idea?

Jordan Robert Dobson

I might just make one myself initially Johannes. With just making the movement down or right equal to the same movement on the track...

You could probably place a fake layer over the knob and have that be draggable initially and as that gets dragged you update the actual scroller?

Read the entire post on Facebook