feat: add label support and allow to slide back when its not on

src/components/SlideButton.vue

@@ -3,11 +3,12 @@
         :model-value="sliderValue"
         :max="100"
         :min="1"
-        class="slide-to-action min-w-75 h-14 bg-surface-brand p-x1 text-primary relative inline-block rounded-full"
+        class="slide-to-action min-w-75 h-14 bg-surface-brand p-x1 text-primary relative inline-flex items-center justify-center rounded-full"
         @update:model-value="handleSliding"
     >
         <SliderThumb
-            class="thumb focus:outline-none block w-12 h-12"
+            :id="id"
+            class="thumb overflow-clip bg-surface-brand focus:outline-none inline-block w-12 h-12 rounded-full"
             :class="{
                 'transition-thumb': isTransitionsEnabled && !isThumbActive,
             }"
@@ -17,24 +18,41 @@
         >
             <SubtractIcon class="w-auto h-full text-white" />
         </SliderThumb>
+
+        <label :for="id">
+            {{ label }}
+        </label>
     </SliderRoot>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import { SliderRoot, SliderThumb } from "radix-vue";
+import { SliderRoot, SliderThumb, useId } from "radix-vue";
 import SubtractIcon from "#src/icons/SubtractIcon.vue";
 import { clamp } from "lodash";
 
 export interface SlideButtonProps {
+    id?: string;
+    label?: string;
     modelValue: boolean;
+    textTransform?:
+        | "capitalize"
+        | "uppercase"
+        | "none"
+        | "lowercase"
+        | "full-width"
+        | "full-size-kana";
 }
 
 export type SlideButtonEmits = {
     "update:modelValue": [value: boolean];
 };
 
-const props = defineProps<SlideButtonProps>();
+const props = withDefaults(defineProps<SlideButtonProps>(), {
+    id: () => useId(),
+    label: () => `slide button ${useId()}`,
+    textTransform: "none",
+});
 const emit = defineEmits<SlideButtonEmits>();
 
 onMounted(() => {
@@ -46,7 +64,7 @@ onMounted(() => {
 const isTransitionsEnabled = ref(false);
 
 const MIN_SLIDE_VALUE = 3;
-const MAX_SLIDE_VALUE = 97;
+const MAX_SLIDE_VALUE = 98;
 const COMPLETE_MIN_SLIDE_VALUE = Math.round(0.6 * MAX_SLIDE_VALUE);
 
 const sliderValue = ref([MIN_SLIDE_VALUE]);
@@ -70,7 +88,7 @@ function handleSliding(payload: number[] | undefined) {
         return;
     }
 
-    if (payload[0] < sliderValue.value[0]) {
+    if (sliderValue.value[0] === MAX_SLIDE_VALUE) {
         return;
     }