feat(slider): vertical orientation support for slider with example in docs

[rishabhbizzle]

This PR:

1. Add Vertical orientation support for the Slider component.
2. Add a Vertical Slider example in Documentation.

Fixes: #2186

[vercel[bot]]

@rishabhbizzle is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[rishabhbizzle]

@shadcn please look into this PR. It would be nice to have this feature available for use.

[rishabhbizzle]

I seem to get this when using the vertical orientation. The range portion doesn't cover the background fully

I checked it and it's working fine please re-check your code with the example I added in docs.

dark mode:

light mode:

[rishabhbizzle]

Please review this PR @shadcn

[jp-hedilog]

interesting. inspecting the element seems to show this for the range span element

Adding right-0 left-0 to

 <SliderPrimitive.Range
        className={cn(
          "absolute h-full bg-primary",
          orientation === "vertical" ? "w-full right-0 left-0" : "h-full"
        )}
      />

fixed it for me. I'm curious if the misaligned span element is there for you as well.

I seem to get this when using the vertical orientation. The range portion doesn't cover the background fully

I checked it and it's working fine please re-check your code with the example I added in docs.

dark mode:

light mode:

[rishabhbizzle]

Nope.. the span element is correctly aligned for me @jp-hedilog

[alamenai]

@rishabhbizzle , thank you for this PR.

[sonyarianto]

any reason this is not merged yet?

[rishabhbizzle]

any reason this is not merged yet?

@shadcn 👀

[xmliszt]

I think a better approach would be to use radix/primitive exposed data-orientation attribute to differentiate the horizontal and vertical case directly using tailwindcss data-* modifier. And another small nit is better to use w-2 following what the original shadcn slider (for default, and for new-york is w-1.5 does instead of hard code the w-[20px] there. I have another implementation here in PR can take a look: https://github.com/shadcn-ui/ui/pull/2586