From b4ff143c42265048c1a0ff717e7535746df9caa3 Mon Sep 17 00:00:00 2001
From: Ingrid <ingridmegge@gmail.com>
Date: Fri, 21 Apr 2023 19:19:06 +0200
Subject: [PATCH] la inn slider

---
 src/components/EatFridgeItemModal.vue | 23 ++++++++++++-----------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index ccf9e84..5e77cb0 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -1,15 +1,14 @@
 <template>
   <div v-if="visible" id="popup">
-      <p>Hvor mye har du tatt av varen?</p>
-      <br>
-      <br>
       <h2>{{ fridgeItem }}</h2>
-      <p>50%</p>
-      <p>|----------o-----------|</p>
-      <p>.</p>
+      <p>{{sliderValue}}</p>
+
+      <label for="slider">Mengde tatt av varen:</label>
+      <input type = "range" id = "slider" name = "slider" min="0" max="100" v-model="sliderValue" @input="sliderChanged">
+
       <div id="buttons">
-          <button @click="close">ALT</button>
-          <button>Ingen ting</button>
+          <button @click="close">Ble kastet 🧺</button>
+          <button>Ble spist 😋</button>
       </div>
   </div>
 </template>
@@ -25,13 +24,15 @@ export default {
   },
   data() {
      return {
-       visible:true
+       visible:true,
+       sliderValue: 50
      }
   },
   methods:{
       close(){
         this.$emit('closeModal',this);
-      }
+      },
+
   }
 }
 </script>
@@ -40,7 +41,7 @@ export default {
 #popup {
   background-color: turquoise;
   color: black;
-  width: 50%;
+  width: 80%;
   display:flex;
   flex-direction: column;
   align-items: center;
-- 
GitLab