Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Jan Kremlacek 2024-10-08 07:46:53 +02:00 committed by GitHub
parent 603497e822
commit ff6d9d0da6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/src/lib/registry/default/ui/slider/Slider.vue
View File

@ -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"

6
apps/www/src/lib/registry/new-york/ui/slider/Slider.vue
View File

@ -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"