Made price range slider non-strict and added sensible default values

src/components/RandomConfigurationPanel.vue

@@ -65,7 +65,7 @@ function mapValuesToModel(values: Object): SearchPreferences {
   };
 }
 
-const { values, handleSubmit, defineField } = useForm({
+const { errors, values, handleSubmit, defineField } = useForm({
   validationSchema: toTypedSchema(
     yup.object({
       priceRangeEnabled: yup.boolean(),
@@ -87,8 +87,10 @@ const { values, handleSubmit, defineField } = useForm({
     includeRestaurantsEnabled: searchPreferences.value?.includeRestaurantsEnabled,
     excludeRestaurantsEnabled: searchPreferences.value?.excludeRestaurantsEnabled,
     priceRange: [
-      Number(Object.keys(priceTicks).find((key) => priceTicks[key] == searchPreferences.value?.lowerPriceBound)),
-      Number(Object.keys(priceTicks).find((key) => priceTicks[key] == searchPreferences.value?.upperPriceBound)),
+      Number(Object.keys(priceTicks).find((key) => priceTicks[key] == searchPreferences.value?.lowerPriceBound ?? "€")),
+      Number(
+        Object.keys(priceTicks).find((key) => priceTicks[key] == searchPreferences.value?.upperPriceBound ?? "€€€€")
+      ),
     ],
     includedTags: searchPreferences.value?.includedTags,
     excludedTags: searchPreferences.value?.excludedTags,
@@ -134,7 +136,7 @@ const emit = defineEmits({
 const onSubmit = handleSubmit(async (values) => {
   try {
     const data = mapValuesToModel(values);
-
+    console.log(values);
     await pb.collection("search_preferences").update(searchPreferences.value!.id!, data);
   } catch (err) {
     console.log(err);
@@ -161,7 +163,6 @@ const onSubmit = handleSubmit(async (values) => {
           :ticks="priceTicks"
           track-size="8"
           :disabled="!priceRangeEnabled"
-          strict
         />
       </div>
     </div>
@@ -226,6 +227,7 @@ const onSubmit = handleSubmit(async (values) => {
   </div>
   <div class="flex-1"></div>
   <div>
+    {{ errors }}
     {{ filteredRestaurants }} filtered restaurants
     <button @click="onSubmit" class="btn btn-outline w-full">Save preferences</button>
   </div>