Show sliders

Author: w3bdesign

components/common/Checkbox.vue

@@ -1,10 +1,15 @@
 <template>
   <label class="flex items-center space-x-2 cursor-pointer">
     <input type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 rounded" disabled />
-    <span class="text-sm"><slot>Checkbox</slot></span>
+    <span class="text-sm">{{ label }}</span>
   </label>
 </template>
 
 <script setup>
-// No logic yet, presentational only
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+});
 </script>

components/common/RangeSlider.vue

@@ -1,13 +1,16 @@
 <template>
-  <div class="flex items-center space-x-2 w-full">
+  <div class="w-full">
     <input
       type="range"
       min="0"
       max="1000"
       class="w-full accent-blue-600"
       disabled
     />
-    <span class="text-sm">kr 0 - kr 1000</span>
+    <div class="flex justify-between text-sm mt-1">
+      <span>kr 0</span>
+      <span>kr 1000</span>
+    </div>
   </div>
 </template>