add volume setter

luckydiamond/src/pages/SettingsPage.vue

@@ -1,22 +1,28 @@
 <template>
-  <div class="content__grid-profile" >
+  <div class="content__grid-profile">
     <aside-bar-component></aside-bar-component>
 
     <chat-component></chat-component>
 
     <header-component></header-component>
 
-  <section class="settings">
-    
-     <!-- <div id="volume-control">
+    <section class="settings">
+      <!-- <div id="volume-control">
     <button id="volume-up" @click="volumeUp">+</button>
     <button id="volume-down" @click="volumeDown">-</button>
   </div>
      -->
-    
 
-  </section>
-    
+      <input
+        id="volumeControl"
+        type="range"
+        min="0"
+        max="10"
+        v-model="volume"
+        @input="handleVolumeChange"
+        ref="volumeControl"
+      />
+    </section>
   </div>
 </template>
 
@@ -24,46 +30,33 @@
 import AsideBarComponent from "@/components/AsidebarComponent.vue";
 import ChatComponent from "@/components/ChatComponent.vue";
 import HeaderComponent from "@/components/HeaderComponent.vue";
+import {SaveToLocalStorage,GetFromLocalStorage } from "@/assets/js/storage/LocalStorage";
 
-import '@/assets/css/PagesStyles/settings.css'
+import "@/assets/css/PagesStyles/settings.css";
 export default {
   components: {
     ChatComponent,
     HeaderComponent,
-    AsideBarComponent
+    AsideBarComponent,
+  },
+  data() {
+    return {
+      volume: 5, // Значение по умолчанию, на случай, если в LocalStorage ничего нет
+    };
   },
   methods: {
-    volumeUp() {
-      var volume = document.getElementById("volume-indicator").value;
-      if (volume) {
-        volume += 10;
+    handleVolumeChange() {
+      const volume = this.$refs.volumeControl.value;
+      SaveToLocalStorage("volume",volume);
 
-        if (volume > 100) {
-          volume = 100;
-        }
-
-        document.getElementById("volume-indicator").value = volume;
-      } else {
-        console.error("Element with id 'volume-indicator' not found or does not have a value property.");
-      }
-    },
-    // остальной код метода volumeDown()
-  
-    volumeDown() {
-      // Получить текущий уровень громкости
-      var volume = document.getElementById("volume-indicator").value;
-
-      // Уменьшить уровень громкости на 10%
-      volume -= 10;
-
-      // Убедиться, что уровень громкости не ниже 0%
-      if (volume < 0) {
-        volume = 0;
-      }
-
-      // Установить новый уровень громкости
-      document.getElementById("volume-indicator").value = volume;
+      // Транслировать изменение громкости глобально
     },
   },
-}
+  created() {
+    const storedVolume = GetFromLocalStorage("volume"); // Убедитесь, что этот метод существует и правильно работает
+    if (storedVolume !== null) {
+      this.volume = storedVolume;
+    }
+  }
+};
 </script>