Fix: Shadcn doesn't Support Vertical Slider

gabe-serna · Nov 7, 2024 · 587bd8f · 587bd8f
1 parent e7644d8
commit 587bd8f
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 22 deletions.
diff --git a/app/audio/MidiEditor.tsx b/app/audio/MidiEditor.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import { useContext, useEffect, useRef, useState } from "react";
+import {
+  MouseEventHandler,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { AudioContext } from "./AudioProvider";
 import { AudioStorage, Stem } from "@/utils/types";
 import { ArrowLeft, ArrowRight } from "lucide-react";
@@ -12,14 +18,15 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Slider } from "@/components/ui/slider";
 
 export default function MidiEditor() {
   const { audioStorage } = useContext(AudioContext);
-  const midiAdjustments = useRef<HTMLDivElement>(null);
-  const audioControls = useRef<HTMLDivElement>(null);
+  const midiAdjustments = useRef<HTMLButtonElement>(null);
+  const audioControls = useRef<HTMLButtonElement>(null);
   const [controlsOpen, setControlsOpen] = useState(false);
 
-  const handleOpen = (_event: React.MouseEvent<HTMLDivElement>) => {
+  const handleOpen: MouseEventHandler<HTMLButtonElement> = (event) => {
     setTimeout(() => {
       if (!midiAdjustments.current || !audioControls.current) return;
       console.log(
@@ -57,28 +64,34 @@ export default function MidiEditor() {
             collapsible
           >
             <div className="flex flex-col space-y-4">
-              <AccordionItem
-                ref={midiAdjustments}
-                onClick={handleOpen}
-                value="midi-adjustments"
-              >
-                <AccordionTrigger className="font-heading w-[300px] rounded-3xl border-2 border-border bg-accent px-6">
+              <AccordionItem value="midi-adjustments">
+                <AccordionTrigger
+                  ref={midiAdjustments}
+                  onClick={handleOpen}
+                  className="font-heading w-[300px] rounded-3xl border-2 border-border bg-accent px-6"
+                >
                   Midi Adjustments
                 </AccordionTrigger>
                 <AccordionContent className="rounded-3xl border-2 border-border bg-card px-6 dark:bg-stone-900">
                   <MidiAdjustments />
                 </AccordionContent>
               </AccordionItem>
-              <AccordionItem
-                ref={audioControls}
-                onClick={handleOpen}
-                value="audio-controls"
-              >
-                <AccordionTrigger className="font-heading w-[300px] rounded-3xl border-2 border-border bg-accent px-6">
+              <AccordionItem value="audio-controls">
+                <AccordionTrigger
+                  ref={audioControls}
+                  onClick={handleOpen}
+                  className="font-heading w-[300px] rounded-3xl border-2 border-border bg-accent px-6"
+                >
                   Audio Controls
                 </AccordionTrigger>
-                <AccordionContent className="flex flex-col gap-4 rounded-3xl border-2 border-border bg-card px-6 dark:bg-stone-900">
-                  audio
+                <AccordionContent className="flex h-32 flex-col gap-4 rounded-3xl border-2 border-border bg-card px-6 dark:bg-stone-900">
+                  <Slider
+                    orientation="vertical"
+                    max={100}
+                    min={0}
+                    defaultValue={[50]}
+                    className=""
+                  />
                 </AccordionContent>
               </AccordionItem>
             </div>

diff --git a/app/globals.css b/app/globals.css
@@ -149,3 +149,17 @@ a,
     visibility 0.3s ease,
     background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
+
+.SliderRoot[data-orientation="vertical"] {
+  flex-direction: column;
+  width: 20px;
+  height: 100px;
+}
+
+.SliderTrack[data-orientation="vertical"] {
+  width: 3px;
+}
+
+.SliderRange[data-orientation="vertical"] {
+  width: 100%;
+}
diff --git a/components/ui/slider.tsx b/components/ui/slider.tsx
@@ -12,15 +12,42 @@ const Slider = React.forwardRef<
   <SliderPrimitive.Root
     ref={ref}
     className={cn(
-      "relative flex w-full touch-none select-none items-center",
+      "relative flex touch-none select-none",
+      // Orientation handling from the bug fix
+      "data-[orientation='horizontal']:h-2 data-[orientation='horizontal']:w-full data-[orientation='horizontal']:items-center",
+      "data-[orientation='vertical']:h-full data-[orientation='vertical']:w-2 data-[orientation='vertical']:justify-center",
       className,
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderPrimitive.Range className="absolute h-full bg-gradient-to-r from-pink-300 to-pink-500 dark:to-pink-400" />
+    <SliderPrimitive.Track
+      className={cn(
+        "relative grow overflow-hidden rounded-full bg-secondary",
+        // Orientation handling from the bug fix
+        "data-[orientation='horizontal']:h-2 data-[orientation='horizontal']:w-full",
+        "data-[orientation='vertical']:h-full data-[orientation='vertical']:w-2",
+        // Custom styles from your second component
+        "bg-secondary",
+      )}
+    >
+      <SliderPrimitive.Range
+        className={cn(
+          // Custom Range styles from your second component
+          "absolute h-full from-pink-300 to-pink-500 data-[orientation='horizontal']:bg-gradient-to-r data-[orientation='vertical']:bg-gradient-to-t dark:to-pink-400",
+          "data-[orientation='horizontal']:h-full",
+          "data-[orientation='vertical']:w-full",
+        )}
+      />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-pink-500 bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:border-pink-400" />
+    <SliderPrimitive.Thumb
+      className={cn(
+        // Custom Thumb styles from your second component
+        "block h-5 w-5 rounded-full border-2 border-pink-500 dark:border-pink-400",
+        "bg-background ring-offset-background transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:pointer-events-none disabled:opacity-50",
+      )}
+    />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;