slider

1<script setup lang="ts">
2import type { SliderRootEmits, SliderRootProps } from "reka-ui"
3import type { HTMLAttributes } from "vue"
4import { reactiveOmit } from "@vueuse/core"
5import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from "reka-ui"
6import { cn } from "@/lib/utils"
7 
8const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>()
9const emits = defineEmits<SliderRootEmits>()
10 
11const delegatedProps = reactiveOmit(props, "class")
12 
13const forwarded = useForwardPropsEmits(delegatedProps, emits)
14</script>
15 
16<template>
17  <SliderRoot
18    :class="cn(
19      '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',
20      props.class,
21    )"
22    v-bind="forwarded"
23  >
24    <SliderTrack class="relative h-1.5 w-full data-[orientation=vertical]:w-1.5 grow overflow-hidden rounded-full bg-primary/20">
25      <SliderRange class="absolute h-full data-[orientation=vertical]:w-full bg-primary" />
26    </SliderTrack>
27    <SliderThumb
28      v-for="(_, key) in modelValue"
29      :key="key"
30      class="block h-5 w-5 rounded-full border-2 border-primary 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"
31    />
32  </SliderRoot>
33</template>