From 9d97a88f67ac110e02d4e7388b99e3c9f3c97c2d Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Fri, 2 Feb 2024 19:27:35 +0100
Subject: [PATCH] UPD: Custom slider handles

---
 src/components/config/SteppedSlider.vue | 2 +-
 src/components/ui/slider/Slider.vue     | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/config/SteppedSlider.vue b/src/components/config/SteppedSlider.vue
index 42b04e1..5834639 100644
--- a/src/components/config/SteppedSlider.vue
+++ b/src/components/config/SteppedSlider.vue
@@ -19,7 +19,7 @@
 </template>
 <script setup>
 import { Slider } from '@/components/ui/slider'
-import { computed, onBeforeMount } from 'vue'
+import { computed } from 'vue'
 
 const value = defineModel({
   type: Number,
diff --git a/src/components/ui/slider/Slider.vue b/src/components/ui/slider/Slider.vue
index e4483d2..7da92e2 100644
--- a/src/components/ui/slider/Slider.vue
+++ b/src/components/ui/slider/Slider.vue
@@ -7,6 +7,7 @@ import {
   useEmitAsProps,
 } from 'radix-vue'
 import { cn } from '@/lib/utils'
+import { MoreHorizontal } from 'lucide-vue-next'
 
 const props = defineProps({
   name: { type: String, required: false },
@@ -42,6 +43,9 @@ const emits = defineEmits(['update:modelValue', 'valueCommit'])
       <SliderRange class="absolute h-full bg-primary" />
     </SliderTrack>
     <SliderThumb
-      class="block h-5 w-5 rounded-full border hover:bg-zinc-900 border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+      class="flex h-6 w-8 rounded-[8px] border hover:bg-zinc-200 border-zinc-100 bg-zinc-300 transition-colors focus-visible:outline-none focus-visible:ring-1 cursor-pointer focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-zinc-600 justify-center items-center"
+      style="box-shadow: 0 0 15px 0 black">
+      <MoreHorizontal class="h-full" />
+    </SliderThumb>
   </SliderRoot>
 </template>