chore(Slider): support vertical orientation (#734)

unovue · Oct 8, 2024 · ff6d9d0 · ff6d9d0
1 parent 603497e
commit ff6d9d0
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/apps/www/src/lib/registry/default/ui/slider/Slider.vue b/apps/www/src/lib/registry/default/ui/slider/Slider.vue
@@ -19,13 +19,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <SliderRoot
     :class="cn(
-      'relative flex w-full touch-none select-none items-center',
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-2 data-[orientation=vertical]:h-full',
       props.class,
     )"
     v-bind="forwarded"
   >
-    <SliderTrack class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
-      <SliderRange class="absolute h-full bg-primary" />
+    <SliderTrack class="relative h-2 w-full data-[orientation=vertical]:w-2 grow overflow-hidden rounded-full bg-secondary">
+      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
     </SliderTrack>
     <SliderThumb
       v-for="(_, key) in modelValue"

diff --git a/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue b/apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
@@ -19,13 +19,13 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
 <template>
   <SliderRoot
     :class="cn(
-      'relative flex w-full touch-none select-none items-center',
+      'relative flex w-full touch-none select-none items-center data-[orientation=vertical]:flex-col data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:h-full',
       props.class,
     )"
     v-bind="forwarded"
   >
-    <SliderTrack class="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-      <SliderRange class="absolute h-full bg-primary" />
+    <SliderTrack class="relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20">
+      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
     </SliderTrack>
     <SliderThumb
       v-for="(_, key) in modelValue"