replace el-slider with Slider component

src/components/ui/slider/Slider.vue

@@ -0,0 +1,56 @@
+<script setup>
+    import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
+    import { cn } from '@/lib/utils';
+    import { reactiveOmit } from '@vueuse/core';
+
+    const props = defineProps({
+        defaultValue: { type: Array, required: false },
+        modelValue: { type: [Array, null], required: false },
+        disabled: { type: Boolean, required: false },
+        orientation: { type: String, required: false },
+        dir: { type: String, required: false },
+        inverted: { type: Boolean, required: false },
+        min: { type: Number, required: false },
+        max: { type: Number, required: false },
+        step: { type: Number, required: false },
+        minStepsBetweenThumbs: { type: Number, required: false },
+        thumbAlignment: { type: String, required: false },
+        asChild: { type: Boolean, required: false },
+        as: { type: null, required: false },
+        name: { type: String, required: false },
+        required: { type: Boolean, required: false },
+        class: { type: null, required: false }
+    });
+    const emits = defineEmits(['update:modelValue', 'valueCommit']);
+
+    const delegatedProps = reactiveOmit(props, 'class');
+
+    const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+    <SliderRoot
+        v-slot="{ modelValue }"
+        data-slot="slider"
+        :class="
+            cn(
+                'relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col',
+                props.class
+            )
+        "
+        v-bind="forwarded">
+        <SliderTrack
+            data-slot="slider-track"
+            class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5">
+            <SliderRange
+                data-slot="slider-range"
+                class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+        </SliderTrack>
+
+        <SliderThumb
+            v-for="(_, key) in modelValue"
+            :key="key"
+            data-slot="slider-thumb"
+            class="bg-white border-primary ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
+    </SliderRoot>
+</template>

src/components/ui/slider/index.js

@@ -0,0 +1 @@
+export { default as Slider } from './Slider.vue';