la inn slider

src/components/EatFridgeItemModal.vue

 <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;