Progressing on the components with the Slider and the Switch

components/SliderInput.vue

@@ -0,0 +1,20 @@
+<template>
+    <Label class="flex justify-center items-center my-2">{{ label }}
+        <SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model ? [model] : undefined" :v-model="[model]" @update:model-value="(value) => model = value ? value[0] : min" :min="min" :max="max" :step="step">
+            <SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
+                <SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
+            </SliderTrack>
+            <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
+        </SliderRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+const { min = 0, max = 100, step = 1, label } = defineProps<{
+    min?: number
+    max?: number
+    step?: number
+    label?: string
+}>();
+const model = defineModel<number>()
+</script>

components/SliderRangeInput.vue

@@ -0,0 +1,21 @@
+<template>
+  <Label class="flex justify-center items-center my-2">{{ label }}
+      <SliderRoot class="ms-4 relative flex items-center select-none touch-none w-[160px] h-5" :default-value="model" :v-model="model":min="min" :max="max" :step="step">
+          <SliderTrack class="bg-light-40 dark:bg-dark-40 relative h-1 w-full">
+              <SliderRange class="absolute bg-light-30 dark:bg-dark-30 h-full" />
+          </SliderTrack>
+          <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
+          <SliderThumb class="block w-5 h-5 bg-light-50 dark:bg-dark-50 outline-none focus:shadow-raw transition-[box-shadow] focus:shadow-light-60 dark:focus:shadow-dark-60" />
+      </SliderRoot>
+  </Label>
+</template>
+
+<script setup lang="ts">
+const { min = 0, max = 100, step = 1, label } = defineProps<{
+  min?: number
+  max?: number
+  step?: number
+  label?: string
+}>();
+const model = defineModel<number[]>()
+</script>

components/Switch.vue

@@ -1,8 +1,8 @@
 <template>
     <div>
         <Label class="flex justify-center items-center my-2">{{ label }}
-            <SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35">
-                <SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-70 dark:bg-dark-70 border border-light-50 dark:border-dark-50 data-[state=checked]:translate-x-[26px]"/>
+            <SwitchRoot v-model:checked="model" :disabled="disabled" class="ms-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 dark:hover:border-dark-35 data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35">
+                <SwitchThumb class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]"/>
             </SwitchRoot>
         </Label>
   </div>
@@ -10,7 +10,7 @@
 
 <script setup lang="ts">
 const { label, disabled } = defineProps<{
-    label: string
+    label?: string
     disabled?: boolean
 }>();
 const model = defineModel<boolean>();

components/TextInput.vue

@@ -7,7 +7,7 @@
 <script setup lang="ts">
 const { type = 'text', label, disabled = false, placeholder } = defineProps<{
     type?: 'text' | 'password' | 'email' | 'tel' | 'url'
-    label: string
+    label?: string
     disabled?: boolean
     placeholder?: string
 }>();