primitives
primitives copied to clipboard
radix-ui
[Slider] Prop to flip direction of values in vertical orientation
Feature request
Overview
This is feature request concerning the Slider Primitive When the current slider is in vertical orientation, value = 0 is at the bottom of the slider, while value = max is at the top.
It would be great to have an option of switch the direction, so that value = 0 is at the top of the slider and value = max is at the bottom.
There is currently a prop on Slider.Root to switch the direction on the slider if it is horizontal, (dir = rtl or ltr), it would be useful to have the same but for vertical!
Who does this impact? Who is this for?
I'm asking because I need it. My app has an array of cards, and a slider that focuses each card as it moves down. However, because the direction of the slider is the way it is, I need to do some Math to make the position of the thumb align to the card that is focuses. I'll link a prototype below. The relevant slider code starts on line 35 https://replit.com/join/ofcqsnrbeg-cyberspaceline
I think, however, it would be useful for anyone who would like a vertical slider. It's just a little extra confusing to the use the value output of the slider when it's backwards!
Additional context
Thank you for all your hard work I appreciate it :D
Hey @cyberspaceline, that's a pretty uncommon UI! Whilst I can see how having an option like this would be useful to you, I cannot find any prior art for this natively. We looked at this when we implemented support for vertical orientation, and native ones always go from bottom to top.
In a way the UI you have is almost like a scrollbar.
I will keep this open as a potential enhancement, but I can't promise we will do it as I think that's pretty uncommon.
Also forgot to mention, but the way you are using the controlled API currently to reverse the value is great IMO! :clap:
Hey @cyberspaceline,
I was too curious to take a look at what it would take as I had a feeling it would be pretty simple to support. Turns out that was the case, I opened a PR for it: #1695
You can see the result in this story: https://601857eb614bae0021c9b9dd-dydyxifjgt.chromatic.com/?path=/story/components-slider--inversions