From 084ea2b1fedc7c89b77964f000a2b8dd5537d920 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 9 Dec 2023 19:00:57 +0900
Subject: [PATCH 01/21] =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=88=E9=80=9A=E8=A9=B1=EF=BC=89=E3=81=AE=E9=A0=85=E7=9B=AE?=
 =?UTF-8?q?=E3=81=AE=E9=A0=86=E7=95=AA=E5=A4=89=E6=9B=B4=E3=80=81=E6=96=87?=
 =?UTF-8?q?=E7=AB=A0=E3=81=AE=E4=B8=80=E9=83=A8=E4=BF=AE=E6=AD=A3=E3=80=81?=
 =?UTF-8?q?=E3=83=A9=E3=82=B8=E3=82=AA=E3=83=9C=E3=82=BF=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E3=83=AC=E3=82=A4=E3=82=A2=E3=82=A6=E3=83=88=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/QallTab/NoiseSuppression.vue     |  1 +
 src/views/Settings/QallTab.vue                | 96 +++++++++----------
 2 files changed, 49 insertions(+), 48 deletions(-)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index 9caf36ccc..c1805cf7f 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -54,6 +54,7 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
   margin-left: 12px;
 }
 .input {
+  display:block;
   margin-right: 8px;
 }
 </style>
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 25e818f31..78b7cabde 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -2,73 +2,30 @@
   <section>
     <div :class="$style.element">
       <div :class="$style.enable">
-        <h3 :class="$style.header">RTC機能を有効にする</h3>
+        <h3 :class="$style.header">RTC機能</h3>
         <a-toggle v-model="state.isEnabled" :class="$style.toggle" />
       </div>
       <p :class="$style.content">
-        通話などのRTC(リアルタイムコミュニケーション)機能を有効化します<br />
-        マイクなどへのアクセス許可が必要です
+        通話などのRTC(リアルタイムコミュニケーション)機能を有効化します。
+        マイクなどへのアクセス許可が必要です。
       </p>
     </div>
     <template v-if="state.isEnabled">
-      <div :class="$style.element">
-        <h3 :class="$style.header">マスターボリューム</h3>
-        <form-range-with-value
-          v-model="state.masterVolume"
-          :class="$style.content"
-          max-text="100%"
-          min="0"
-          step="0.005"
-          max="1"
-          :format="formatMasterVolume"
-        />
-      </div>
-      <div :class="$style.element">
-        <h3 :class="$style.header">入力デバイス</h3>
-        <div :class="$style.content">
-          <form-selector
-            v-if="!fetchFailed && audioInputDevices.length > 0"
-            v-model="state.audioInputDeviceId"
-            :options="audioInputDeviceOptions"
-          />
-          <p v-else>デバイスが取得できませんでした</p>
-        </div>
-      </div>
-      <noise-suppression
-        v-model="state.noiseSuppression"
-        :class="$style.element"
-      />
-      <div :class="$style.element">
-        <h3 :class="$style.header">ノイズゲート</h3>
-        <form-range-with-value
-          v-model="state.noiseGateThreshold"
-          :class="$style.content"
-          max-text="-100dB"
-          min="-100"
-          step="1"
-          max="0"
-          :format="formatNoiseGateThreshold"
-        />
-        <p :class="$style.content">
-          マイクに入力された音が指定した音量以下だった場合にミュートします<br />
-          -100dBにすると無効になります
-        </p>
-      </div>
       <div :class="$style.element">
         <div :class="$style.enable">
           <h3 :class="$style.header">メッセージの読み上げ</h3>
           <a-toggle v-model="state.isTtsEnabled" :class="$style.toggle" />
         </div>
         <p :class="$style.content">
-          Qallしているチャンネルに投稿されたメッセージを読み上げます
+          Qallしているチャンネルに投稿されたメッセージを読み上げます。
         </p>
       </div>
       <div v-if="state.isTtsEnabled" :class="$style.element">
-        <h3 :class="$style.header">メッセージ読み上げの声</h3>
         <div :class="$style.content">
           <form-selector
             v-if="voiceOptions.length > 0"
             v-model="state.voiceName"
+            label="読み上げボイスの種類"
             :options="voiceOptions"
           />
           <p v-else>読み上げ音声の声の種類が取得できませんでした</p>
@@ -92,6 +49,49 @@
           />
         </div>
       </div>
+      <div :class="$style.element">
+        <h3 :class="$style.header">入力デバイス</h3>
+        <div :class="$style.content">
+          <form-selector
+            v-if="!fetchFailed && audioInputDevices.length > 0"
+            v-model="state.audioInputDeviceId"
+            :options="audioInputDeviceOptions"
+          />
+          <p v-else>デバイスが取得できませんでした</p>
+        </div>
+      </div>
+      <div :class="$style.element">
+        <h3 :class="$style.header">マスターボリューム</h3>
+        <form-range-with-value
+          v-model="state.masterVolume"
+          :class="$style.content"
+          max-text="100%"
+          min="0"
+          step="0.005"
+          max="1"
+          :format="formatMasterVolume"
+        />
+      </div>
+      <div :class="$style.element">
+        <h3 :class="$style.header">ノイズゲート</h3>
+        <form-range-with-value
+          v-model="state.noiseGateThreshold"
+          :class="$style.content"
+          max-text="-100dB"
+          min="-100"
+          step="1"
+          max="0"
+          :format="formatNoiseGateThreshold"
+        />
+        <p :class="$style.content">
+          マイクに入力された音が指定した音量以下だった場合にミュートします。
+          -100dBにすると無効になります。
+        </p>
+      </div>
+      <noise-suppression
+        v-model="state.noiseSuppression"
+        :class="$style.element"
+      />
     </template>
   </section>
 </template>

From 00a4c4449a85fd3688ecdaa145838d7f75b6d316 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 9 Dec 2023 21:07:19 +0900
Subject: [PATCH 02/21] =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=88=E9=80=9A=E8=A9=B1=EF=BC=89=E3=81=AE=E3=83=AC=E3=82=A4?=
 =?UTF-8?q?=E3=82=A2=E3=82=A6=E3=83=88=E3=80=81=E8=A6=8B=E3=81=9F=E7=9B=AE?=
 =?UTF-8?q?=E5=BE=AE=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/QallTab/NoiseSuppression.vue     |  1 +
 src/views/Settings/QallTab.vue                | 38 ++++++++++---------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index c1805cf7f..c0c87c413 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -55,6 +55,7 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
 }
 .input {
   display:block;
+  font-weight: bold;
   margin-right: 8px;
 }
 </style>
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 78b7cabde..a8dc87c76 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -2,23 +2,27 @@
   <section>
     <div :class="$style.element">
       <div :class="$style.enable">
-        <h3 :class="$style.header">RTC機能</h3>
+        <div :class="$style.header_and_content">
+          <h3 :class="$style.header">RTC機能</h3>
+          <p :class="$style.content">
+            通話などのRTC(リアルタイムコミュニケーション)機能を有効化します。
+            マイクなどへのアクセス許可が必要です。
+          </p>
+        </div>
         <a-toggle v-model="state.isEnabled" :class="$style.toggle" />
       </div>
-      <p :class="$style.content">
-        通話などのRTC(リアルタイムコミュニケーション)機能を有効化します。
-        マイクなどへのアクセス許可が必要です。
-      </p>
     </div>
     <template v-if="state.isEnabled">
       <div :class="$style.element">
         <div :class="$style.enable">
-          <h3 :class="$style.header">メッセージの読み上げ</h3>
+          <div :class="$style.header_and_content">
+            <h3 :class="$style.header">メッセージの読み上げ</h3>
+            <p :class="$style.content">
+              Qallしているチャンネルに投稿されたメッセージを読み上げます。
+            </p>
+          </div>
           <a-toggle v-model="state.isTtsEnabled" :class="$style.toggle" />
         </div>
-        <p :class="$style.content">
-          Qallしているチャンネルに投稿されたメッセージを読み上げます。
-        </p>
       </div>
       <div v-if="state.isTtsEnabled" :class="$style.element">
         <div :class="$style.content">
@@ -28,7 +32,7 @@
             label="読み上げボイスの種類"
             :options="voiceOptions"
           />
-          <p v-else>読み上げ音声の声の種類が取得できませんでした</p>
+          <p v-else>読み上げ音声の声の種類が取得できませんでした。</p>
           <form-input
             v-model.number="state.voicePitch"
             label="ピッチ"
@@ -57,7 +61,7 @@
             v-model="state.audioInputDeviceId"
             :options="audioInputDeviceOptions"
           />
-          <p v-else>デバイスが取得できませんでした</p>
+          <p v-else>デバイスが取得できませんでした。</p>
         </div>
       </div>
       <div :class="$style.element">
@@ -74,6 +78,10 @@
       </div>
       <div :class="$style.element">
         <h3 :class="$style.header">ノイズゲート</h3>
+        <p :class="$style.content">
+          マイクに入力された音が指定した音量以下だった場合にミュートします。
+          -100dBにすると無効になります。
+        </p>
         <form-range-with-value
           v-model="state.noiseGateThreshold"
           :class="$style.content"
@@ -83,10 +91,6 @@
           max="0"
           :format="formatNoiseGateThreshold"
         />
-        <p :class="$style.content">
-          マイクに入力された音が指定した音量以下だった場合にミュートします。
-          -100dBにすると無効になります。
-        </p>
       </div>
       <noise-suppression
         v-model="state.noiseSuppression"
@@ -218,8 +222,8 @@ const voiceOptions = useVoices()
   display: flex;
   align-items: center;
   margin-bottom: 8px;
-  h3 {
-    margin: 0;
+  .header_and_content {
+    flex: 1;
   }
   .toggle {
     margin-left: 12px;

From cd8048e500c100a8eb3d3a7d81e400a6009ec521 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 9 Dec 2023 21:58:48 +0900
Subject: [PATCH 03/21] =?UTF-8?q?=E8=A8=AD=E5=AE=9A=E7=94=BB=E9=9D=A2?=
 =?UTF-8?q?=EF=BC=88=E9=80=9A=E8=A9=B1=EF=BC=89=E3=81=AE=E3=83=AC=E3=82=A4?=
 =?UTF-8?q?=E3=82=A2=E3=82=A6=E3=83=88=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/QallTab/NoiseSuppression.vue         |  5 +----
 src/views/Settings/QallTab.vue                    | 15 +++++----------
 2 files changed, 6 insertions(+), 14 deletions(-)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index c0c87c413..b8d42a36e 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -1,7 +1,7 @@
 <template>
   <div>
     <h3 :class="$style.header">ノイズ抑制</h3>
-    <div :class="$style.content">
+    <div>
       <template v-if="isAudioWorkletSupported">
         <form-radio
           v-model="noiseSuppressionValue"
@@ -50,9 +50,6 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
 .header {
   margin-bottom: 8px;
 }
-.content {
-  margin-left: 12px;
-}
 .input {
   display:block;
   font-weight: bold;
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index a8dc87c76..d8616231d 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -4,7 +4,7 @@
       <div :class="$style.enable">
         <div :class="$style.header_and_content">
           <h3 :class="$style.header">RTC機能</h3>
-          <p :class="$style.content">
+          <p>
             通話などのRTC(リアルタイムコミュニケーション)機能を有効化します。
             マイクなどへのアクセス許可が必要です。
           </p>
@@ -17,7 +17,7 @@
         <div :class="$style.enable">
           <div :class="$style.header_and_content">
             <h3 :class="$style.header">メッセージの読み上げ</h3>
-            <p :class="$style.content">
+            <p>
               Qallしているチャンネルに投稿されたメッセージを読み上げます。
             </p>
           </div>
@@ -25,7 +25,7 @@
         </div>
       </div>
       <div v-if="state.isTtsEnabled" :class="$style.element">
-        <div :class="$style.content">
+        <div>
           <form-selector
             v-if="voiceOptions.length > 0"
             v-model="state.voiceName"
@@ -55,7 +55,7 @@
       </div>
       <div :class="$style.element">
         <h3 :class="$style.header">入力デバイス</h3>
-        <div :class="$style.content">
+        <div>
           <form-selector
             v-if="!fetchFailed && audioInputDevices.length > 0"
             v-model="state.audioInputDeviceId"
@@ -68,7 +68,6 @@
         <h3 :class="$style.header">マスターボリューム</h3>
         <form-range-with-value
           v-model="state.masterVolume"
-          :class="$style.content"
           max-text="100%"
           min="0"
           step="0.005"
@@ -78,13 +77,12 @@
       </div>
       <div :class="$style.element">
         <h3 :class="$style.header">ノイズゲート</h3>
-        <p :class="$style.content">
+        <p>
           マイクに入力された音が指定した音量以下だった場合にミュートします。
           -100dBにすると無効になります。
         </p>
         <form-range-with-value
           v-model="state.noiseGateThreshold"
-          :class="$style.content"
           max-text="-100dB"
           min="-100"
           step="1"
@@ -215,9 +213,6 @@ const voiceOptions = useVoices()
 .element {
   margin: 24px 0;
 }
-.content {
-  margin-left: 12px;
-}
 .enable {
   display: flex;
   align-items: center;

From 267ee0701a4f116f47d4aa57b66963fcbb17cea8 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 9 Dec 2023 22:45:53 +0900
Subject: [PATCH 04/21] =?UTF-8?q?=E6=96=87=E5=AD=97=E9=96=A2=E9=80=A3?=
 =?UTF-8?q?=E3=81=AE=E5=A4=89=E6=9B=B4=E3=82=92=E4=B8=80=E5=BA=A6=E6=B6=88?=
 =?UTF-8?q?=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/QallTab/NoiseSuppression.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index b8d42a36e..288f766fb 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -52,7 +52,6 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
 }
 .input {
   display:block;
-  font-weight: bold;
   margin-right: 8px;
 }
 </style>

From 77a781f024117e819875ef179ccf0d569af1df95 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 9 Dec 2023 22:59:19 +0900
Subject: [PATCH 05/21] =?UTF-8?q?=E5=A4=89=E6=9B=B4=E3=82=92=E6=88=BB?=
 =?UTF-8?q?=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/QallTab/NoiseSuppression.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index 288f766fb..b8d42a36e 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -52,6 +52,7 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
 }
 .input {
   display:block;
+  font-weight: bold;
   margin-right: 8px;
 }
 </style>

From 0a6646c4a5c0b3d33d0f4cd3193a7c4515ec16c1 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 9 Dec 2023 23:16:04 +0900
Subject: [PATCH 06/21] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=81=AE?=
 =?UTF-8?q?=E7=B4=B0=E3=81=8B=E3=81=84=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Settings/QallTab/NoiseSuppression.vue | 2 +-
 src/views/Settings/QallTab.vue                       | 4 +---
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index b8d42a36e..52ae89675 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -51,7 +51,7 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
   margin-bottom: 8px;
 }
 .input {
-  display:block;
+  display: block;
   font-weight: bold;
   margin-right: 8px;
 }
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index d8616231d..5fe809f6e 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -17,9 +17,7 @@
         <div :class="$style.enable">
           <div :class="$style.header_and_content">
             <h3 :class="$style.header">メッセージの読み上げ</h3>
-            <p>
-              Qallしているチャンネルに投稿されたメッセージを読み上げます。
-            </p>
+            <p>Qallしているチャンネルに投稿されたメッセージを読み上げます。</p>
           </div>
           <a-toggle v-model="state.isTtsEnabled" :class="$style.toggle" />
         </div>

From b42c4f0053dcb1d080da7207d9c2e6abda567156 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Thu, 28 Dec 2023 18:27:41 +0900
Subject: [PATCH 07/21] =?UTF-8?q?=E6=8C=87=E6=91=98=E3=82=92=E3=81=84?=
 =?UTF-8?q?=E3=81=9F=E3=81=A0=E3=81=84=E3=81=9F=E3=81=A8=E3=81=93=E3=82=8D?=
 =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/QallTab.vue | 87 +++++++++++++++++++---------------
 1 file changed, 49 insertions(+), 38 deletions(-)

diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 5fe809f6e..a21fd0792 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -2,57 +2,59 @@
   <section>
     <div :class="$style.element">
       <div :class="$style.enable">
-        <div :class="$style.header_and_content">
-          <h3 :class="$style.header">RTC機能</h3>
+        <section :class="$style.section">
+          <h3 :class="$style.heading">RTC機能</h3>
           <p>
             通話などのRTC(リアルタイムコミュニケーション)機能を有効化します。
             マイクなどへのアクセス許可が必要です。
           </p>
-        </div>
+        </section>
         <a-toggle v-model="state.isEnabled" :class="$style.toggle" />
       </div>
     </div>
     <template v-if="state.isEnabled">
       <div :class="$style.element">
         <div :class="$style.enable">
-          <div :class="$style.header_and_content">
-            <h3 :class="$style.header">メッセージの読み上げ</h3>
+          <section :class="$style.section">
+            <h3 :class="$style.heading">メッセージの読み上げ</h3>
             <p>Qallしているチャンネルに投稿されたメッセージを読み上げます。</p>
-          </div>
+          </section>
           <a-toggle v-model="state.isTtsEnabled" :class="$style.toggle" />
         </div>
       </div>
       <div v-if="state.isTtsEnabled" :class="$style.element">
-        <div>
-          <form-selector
-            v-if="voiceOptions.length > 0"
-            v-model="state.voiceName"
-            label="読み上げボイスの種類"
-            :options="voiceOptions"
-          />
-          <p v-else>読み上げ音声の声の種類が取得できませんでした。</p>
-          <form-input
-            v-model.number="state.voicePitch"
-            label="ピッチ"
-            type="number"
-            step="0.1"
-          />
-          <form-input
-            v-model.number="state.voiceRate"
-            label="速度"
-            type="number"
-            step="0.1"
-          />
-          <form-input
-            v-model.number="state.voiceVolume"
-            label="音量"
-            type="number"
-            step="0.1"
-          />
-        </div>
+        <form-selector
+          v-if="voiceOptions.length > 0"
+          v-model="state.voiceName"
+          label="読み上げボイスの種類"
+          :options="voiceOptions"
+          :class="$style.option"
+        />
+        <p v-else :class="$style.content">読み上げ音声の声の種類が取得できませんでした。</p>
+        <form-input
+          v-model.number="state.voicePitch"
+          label="ピッチ"
+          type="number"
+          step="0.1"
+          :class="$style.option"
+        />
+        <form-input
+          v-model.number="state.voiceRate"
+          label="速度"
+          type="number"
+          step="0.1"
+          :class="$style.option"
+        />
+        <form-input
+          v-model.number="state.voiceVolume"
+          label="音量"
+          type="number"
+          step="0.1"
+          :class="$style.option"
+        />
       </div>
       <div :class="$style.element">
-        <h3 :class="$style.header">入力デバイス</h3>
+        <h3 :class="$style.heading">入力デバイス</h3>
         <div>
           <form-selector
             v-if="!fetchFailed && audioInputDevices.length > 0"
@@ -63,7 +65,7 @@
         </div>
       </div>
       <div :class="$style.element">
-        <h3 :class="$style.header">マスターボリューム</h3>
+        <h3 :class="$style.heading">マスターボリューム</h3>
         <form-range-with-value
           v-model="state.masterVolume"
           max-text="100%"
@@ -74,7 +76,7 @@
         />
       </div>
       <div :class="$style.element">
-        <h3 :class="$style.header">ノイズゲート</h3>
+        <h3 :class="$style.heading">ノイズゲート</h3>
         <p>
           マイクに入力された音が指定した音量以下だった場合にミュートします。
           -100dBにすると無効になります。
@@ -86,6 +88,7 @@
           step="1"
           max="0"
           :format="formatNoiseGateThreshold"
+          :class="$style.content"
         />
       </div>
       <noise-suppression
@@ -205,7 +208,7 @@ const voiceOptions = useVoices()
 </script>
 
 <style lang="scss" module>
-.header {
+.heading {
   margin-bottom: 8px;
 }
 .element {
@@ -215,11 +218,19 @@ const voiceOptions = useVoices()
   display: flex;
   align-items: center;
   margin-bottom: 8px;
-  .header_and_content {
+  .section {
     flex: 1;
   }
   .toggle {
     margin-left: 12px;
   }
 }
+
+.option {
+  margin: 12px 0;
+  font-size: 12px;
+}
+.content {
+  margin: 12px 0;
+}
 </style>

From 6227ea4407f112d317d20e162580fa87bd184276 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Thu, 28 Dec 2023 20:33:23 +0900
Subject: [PATCH 08/21] =?UTF-8?q?prettier=E3=81=A7=E3=81=AE=E3=83=95?=
 =?UTF-8?q?=E3=82=A9=E3=83=BC=E3=83=9E=E3=83=83=E3=83=88=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/QallTab.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index a21fd0792..76eea01a3 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -30,7 +30,9 @@
           :options="voiceOptions"
           :class="$style.option"
         />
-        <p v-else :class="$style.content">読み上げ音声の声の種類が取得できませんでした。</p>
+        <p v-else :class="$style.content">
+          読み上げ音声の声の種類が取得できませんでした。
+        </p>
         <form-input
           v-model.number="state.voicePitch"
           label="ピッチ"

From fd7e59d2cfe4fdcd64f2b5c7fd0f887ffa0e94ae Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Fri, 29 Dec 2023 21:44:32 +0900
Subject: [PATCH 09/21] =?UTF-8?q?=E3=82=BF=E3=82=B0=E3=81=AE=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/QallTab/NoiseSuppression.vue     | 48 +++++++++----------
 src/views/Settings/QallTab.vue                | 12 ++---
 2 files changed, 29 insertions(+), 31 deletions(-)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index 52ae89675..47839ce90 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -1,30 +1,28 @@
 <template>
-  <div>
+  <section>
     <h3 :class="$style.header">ノイズ抑制</h3>
-    <div>
-      <template v-if="isAudioWorkletSupported">
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="Rnnoise"
-          input-value="rnnoise"
-        />
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="Speex"
-          input-value="speex"
-        />
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="無効"
-          input-value="none"
-        />
-      </template>
-      <p v-else>利用している端末が対応していません</p>
-    </div>
-  </div>
+    <template v-if="isAudioWorkletSupported">
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="Rnnoise"
+        input-value="rnnoise"
+      />
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="Speex"
+        input-value="speex"
+      />
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="無効"
+        input-value="none"
+      />
+    </template>
+    <p v-else>利用している端末が対応していません</p>
+  </section>
 </template>
 
 <script lang="ts" setup>
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 76eea01a3..69166e8e7 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -55,7 +55,7 @@
           :class="$style.option"
         />
       </div>
-      <div :class="$style.element">
+      <section :class="$style.element">
         <h3 :class="$style.heading">入力デバイス</h3>
         <div>
           <form-selector
@@ -65,8 +65,8 @@
           />
           <p v-else>デバイスが取得できませんでした。</p>
         </div>
-      </div>
-      <div :class="$style.element">
+      </section>
+      <section :class="$style.element">
         <h3 :class="$style.heading">マスターボリューム</h3>
         <form-range-with-value
           v-model="state.masterVolume"
@@ -76,8 +76,8 @@
           max="1"
           :format="formatMasterVolume"
         />
-      </div>
-      <div :class="$style.element">
+      </section>
+      <section :class="$style.element">
         <h3 :class="$style.heading">ノイズゲート</h3>
         <p>
           マイクに入力された音が指定した音量以下だった場合にミュートします。
@@ -92,7 +92,7 @@
           :format="formatNoiseGateThreshold"
           :class="$style.content"
         />
-      </div>
+      </section>
       <noise-suppression
         v-model="state.noiseSuppression"
         :class="$style.element"

From 2d0d30acad7616fad19090e7e4f45eefbb665125 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 30 Dec 2023 22:41:43 +0900
Subject: [PATCH 10/21] =?UTF-8?q?=E8=A1=8C=E9=96=93=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/QallTab/NoiseSuppression.vue     |  52 +++++----
 src/components/UI/FormInput.vue               |   2 +-
 src/components/UI/FormSelector.vue            |   2 +-
 src/views/Settings/QallTab.vue                | 104 +++++++++---------
 4 files changed, 84 insertions(+), 76 deletions(-)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index 47839ce90..124516e0f 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -1,27 +1,29 @@
 <template>
   <section>
-    <h3 :class="$style.header">ノイズ抑制</h3>
+    <h3 :class="$style.heading">ノイズ抑制</h3>
     <template v-if="isAudioWorkletSupported">
-      <form-radio
-        v-model="noiseSuppressionValue"
-        :class="$style.input"
-        label="Rnnoise"
-        input-value="rnnoise"
-      />
-      <form-radio
-        v-model="noiseSuppressionValue"
-        :class="$style.input"
-        label="Speex"
-        input-value="speex"
-      />
-      <form-radio
-        v-model="noiseSuppressionValue"
-        :class="$style.input"
-        label="無効"
-        input-value="none"
-      />
+      <div :class="$style.choices">
+        <form-radio
+          v-model="noiseSuppressionValue"
+          :class="$style.input"
+          label="Rnnoise"
+          input-value="rnnoise"
+        />
+        <form-radio
+          v-model="noiseSuppressionValue"
+          :class="$style.input"
+          label="Speex"
+          input-value="speex"
+        />
+        <form-radio
+          v-model="noiseSuppressionValue"
+          :class="$style.input"
+          label="無効"
+          input-value="none"
+        />
+      </div>
     </template>
-    <p v-else>利用している端末が対応していません</p>
+    <p v-else>利用している端末が対応していません。</p>
   </section>
 </template>
 
@@ -45,11 +47,15 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
 </script>
 
 <style lang="scss" module>
-.header {
-  margin-bottom: 8px;
+.heading {
+  margin-bottom: 4px;
+}
+.choices {
+  display: flex;
+  flex-direction: column;
+  row-gap: 4px;
 }
 .input {
-  display: block;
   font-weight: bold;
   margin-right: 8px;
 }
diff --git a/src/components/UI/FormInput.vue b/src/components/UI/FormInput.vue
index 3ab843a0b..b1a8c7742 100644
--- a/src/components/UI/FormInput.vue
+++ b/src/components/UI/FormInput.vue
@@ -124,7 +124,7 @@ defineExpose({ focus })
 .label {
   @include color-ui-secondary;
   display: block;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 .inputContainer {
   @include color-ui-primary;
diff --git a/src/components/UI/FormSelector.vue b/src/components/UI/FormSelector.vue
index bdc593708..307f430bf 100644
--- a/src/components/UI/FormSelector.vue
+++ b/src/components/UI/FormSelector.vue
@@ -51,7 +51,7 @@ const id = randomString()
 <style lang="scss" module>
 .label {
   @include color-ui-secondary;
-  margin-bottom: 8px;
+  margin-bottom: 4px;
   display: block;
 }
 .inputContainer {
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 69166e8e7..380b8e5e2 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -1,6 +1,6 @@
 <template>
   <section>
-    <div :class="$style.element">
+    <section :class="$style.element">
       <div :class="$style.enable">
         <section :class="$style.section">
           <h3 :class="$style.heading">RTC機能</h3>
@@ -11,50 +11,50 @@
         </section>
         <a-toggle v-model="state.isEnabled" :class="$style.toggle" />
       </div>
-    </div>
+    </section>
     <template v-if="state.isEnabled">
-      <div :class="$style.element">
-        <div :class="$style.enable">
-          <section :class="$style.section">
-            <h3 :class="$style.heading">メッセージの読み上げ</h3>
-            <p>Qallしているチャンネルに投稿されたメッセージを読み上げます。</p>
-          </section>
-          <a-toggle v-model="state.isTtsEnabled" :class="$style.toggle" />
+      <section :class="$style.element">
+        <div :class="$style.contents">
+          <div :class="$style.enable">
+            <section :class="$style.section">
+              <h3 :class="$style.heading">メッセージの読み上げ</h3>
+              <p>Qallしているチャンネルに投稿されたメッセージを読み上げます。</p>
+            </section>
+            <a-toggle v-model="state.isTtsEnabled" :class="$style.toggle" />
+          </div>
+          <div v-if="state.isTtsEnabled" :class="$style.contents">
+            <form-selector
+              v-if="voiceOptions.length > 0"
+              v-model="state.voiceName"
+              label="読み上げボイスの種類"
+              :options="voiceOptions"
+              :class="$style.option"
+            />
+            <p v-else>読み上げ音声の声の種類が取得できませんでした。</p>
+            <form-input
+              v-model.number="state.voicePitch"
+              label="ピッチ"
+              type="number"
+              step="0.1"
+              :class="$style.option"
+            />
+            <form-input
+              v-model.number="state.voiceRate"
+              label="速度"
+              type="number"
+              step="0.1"
+              :class="$style.option"
+            />
+            <form-input
+              v-model.number="state.voiceVolume"
+              label="音量"
+              type="number"
+              step="0.1"
+              :class="$style.option"
+            />
+          </div>
         </div>
-      </div>
-      <div v-if="state.isTtsEnabled" :class="$style.element">
-        <form-selector
-          v-if="voiceOptions.length > 0"
-          v-model="state.voiceName"
-          label="読み上げボイスの種類"
-          :options="voiceOptions"
-          :class="$style.option"
-        />
-        <p v-else :class="$style.content">
-          読み上げ音声の声の種類が取得できませんでした。
-        </p>
-        <form-input
-          v-model.number="state.voicePitch"
-          label="ピッチ"
-          type="number"
-          step="0.1"
-          :class="$style.option"
-        />
-        <form-input
-          v-model.number="state.voiceRate"
-          label="速度"
-          type="number"
-          step="0.1"
-          :class="$style.option"
-        />
-        <form-input
-          v-model.number="state.voiceVolume"
-          label="音量"
-          type="number"
-          step="0.1"
-          :class="$style.option"
-        />
-      </div>
+      </section>
       <section :class="$style.element">
         <h3 :class="$style.heading">入力デバイス</h3>
         <div>
@@ -90,7 +90,7 @@
           step="1"
           max="0"
           :format="formatNoiseGateThreshold"
-          :class="$style.content"
+          :class="$style.noiseGate"
         />
       </section>
       <noise-suppression
@@ -211,7 +211,7 @@ const voiceOptions = useVoices()
 
 <style lang="scss" module>
 .heading {
-  margin-bottom: 8px;
+  margin-bottom: 4px;
 }
 .element {
   margin: 24px 0;
@@ -219,20 +219,22 @@ const voiceOptions = useVoices()
 .enable {
   display: flex;
   align-items: center;
-  margin-bottom: 8px;
   .section {
     flex: 1;
   }
   .toggle {
-    margin-left: 12px;
+    margin-left: 24px;
   }
 }
-
 .option {
-  margin: 12px 0;
   font-size: 12px;
 }
-.content {
-  margin: 12px 0;
+.noiseGate {
+  margin-top: 4px;
+}
+.contents {
+  display: flex;
+  flex-direction: column;
+  row-gap: 16px;
 }
 </style>

From 4f77a77b040f875a77552b06358b534c8a28b697 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 30 Dec 2023 22:51:54 +0900
Subject: [PATCH 11/21] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E3=81=AE?=
 =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=9E=E3=83=83=E3=83=88=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/QallTab.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 380b8e5e2..cade7ba22 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -18,7 +18,9 @@
           <div :class="$style.enable">
             <section :class="$style.section">
               <h3 :class="$style.heading">メッセージの読み上げ</h3>
-              <p>Qallしているチャンネルに投稿されたメッセージを読み上げます。</p>
+              <p>
+                Qallしているチャンネルに投稿されたメッセージを読み上げます。
+              </p>
             </section>
             <a-toggle v-model="state.isTtsEnabled" :class="$style.toggle" />
           </div>

From 56f7f2081611d3e24079f76a39ec6cef6876d362 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 30 Dec 2023 23:36:05 +0900
Subject: [PATCH 12/21] =?UTF-8?q?=E3=83=A9=E3=82=B8=E3=82=AA=E3=83=9C?=
 =?UTF-8?q?=E3=82=BF=E3=83=B3=E3=81=AE=E5=A4=89=E6=9B=B4=E3=82=92=E5=85=83?=
 =?UTF-8?q?=E3=81=AB=E6=88=BB=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Settings/QallTab/NoiseSuppression.vue     | 44 ++++++++-----------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/src/components/Settings/QallTab/NoiseSuppression.vue b/src/components/Settings/QallTab/NoiseSuppression.vue
index 124516e0f..e16232b29 100644
--- a/src/components/Settings/QallTab/NoiseSuppression.vue
+++ b/src/components/Settings/QallTab/NoiseSuppression.vue
@@ -2,26 +2,24 @@
   <section>
     <h3 :class="$style.heading">ノイズ抑制</h3>
     <template v-if="isAudioWorkletSupported">
-      <div :class="$style.choices">
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="Rnnoise"
-          input-value="rnnoise"
-        />
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="Speex"
-          input-value="speex"
-        />
-        <form-radio
-          v-model="noiseSuppressionValue"
-          :class="$style.input"
-          label="無効"
-          input-value="none"
-        />
-      </div>
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="Rnnoise"
+        input-value="rnnoise"
+      />
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="Speex"
+        input-value="speex"
+      />
+      <form-radio
+        v-model="noiseSuppressionValue"
+        :class="$style.input"
+        label="無効"
+        input-value="none"
+      />
     </template>
     <p v-else>利用している端末が対応していません。</p>
   </section>
@@ -50,12 +48,8 @@ const isAudioWorkletSupported = checkAudioWorkletSupport()
 .heading {
   margin-bottom: 4px;
 }
-.choices {
-  display: flex;
-  flex-direction: column;
-  row-gap: 4px;
-}
 .input {
+  display: block;
   font-weight: bold;
   margin-right: 8px;
 }

From 394a67bb092d0b2e0958c31563ab8ae4c7e8cbc5 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Fri, 12 Jan 2024 17:13:32 +0900
Subject: [PATCH 13/21] =?UTF-8?q?=E3=82=B9=E3=83=A9=E3=82=A4=E3=83=80?=
 =?UTF-8?q?=E3=81=AE=E8=83=8C=E6=99=AF=E8=89=B2=E3=82=92=E6=B6=88=E5=8E=BB?=
 =?UTF-8?q?=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormInput.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/UI/FormInput.vue b/src/components/UI/FormInput.vue
index b1a8c7742..3177691da 100644
--- a/src/components/UI/FormInput.vue
+++ b/src/components/UI/FormInput.vue
@@ -128,7 +128,6 @@ defineExpose({ focus })
 }
 .inputContainer {
   @include color-ui-primary;
-  @include background-secondary;
   @include size-body1;
   height: 30px;
   display: flex;
@@ -137,11 +136,13 @@ defineExpose({ focus })
   &[data-on-secondary] {
     @include background-primary;
   }
-
   border: solid 2px transparent;
   &:focus-within {
     border-color: $theme-accent-focus-default;
   }
+  &:has(.input:not([type='range'])) {
+    @include background-secondary;
+  }
 }
 .prefix {
   margin-left: 8px;

From 3f0aa29f71e18269296c7a71b5347c2151132f2b Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Tue, 23 Jan 2024 00:30:19 +0900
Subject: [PATCH 14/21] =?UTF-8?q?=E3=83=A9=E3=83=99=E3=83=AB=E3=81=AE?=
 =?UTF-8?q?=E8=89=B2=E3=81=AE=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormInput.vue    | 18 +++++++++++++++++-
 src/components/UI/FormSelector.vue |  2 +-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/UI/FormInput.vue b/src/components/UI/FormInput.vue
index 3177691da..3e304840d 100644
--- a/src/components/UI/FormInput.vue
+++ b/src/components/UI/FormInput.vue
@@ -122,7 +122,7 @@ defineExpose({ focus })
 
 <style lang="scss" module>
 .label {
-  @include color-ui-secondary;
+  @include color-ui-primary;
   display: block;
   margin-bottom: 4px;
 }
@@ -144,6 +144,22 @@ defineExpose({ focus })
     @include background-secondary;
   }
 }
+
+.input[type='range'] {
+  appearance: none;
+}
+.input[type='range']::-webkit-slider-runnable-track {
+  background: $theme-ui-secondary-background;
+  height: 4px;
+  border-radius: 4px;
+}
+.input[type='range']::-webkit-slider-thumb {
+  appearance: none;
+  height: 12px;
+  width: 12px;
+  @include background-accent-primary;
+  border-radius: 50%;
+}
 .prefix {
   margin-left: 8px;
 }
diff --git a/src/components/UI/FormSelector.vue b/src/components/UI/FormSelector.vue
index 307f430bf..38d977adb 100644
--- a/src/components/UI/FormSelector.vue
+++ b/src/components/UI/FormSelector.vue
@@ -50,7 +50,7 @@ const id = randomString()
 
 <style lang="scss" module>
 .label {
-  @include color-ui-secondary;
+  @include color-ui-primary;
   margin-bottom: 4px;
   display: block;
 }

From 70cf5ff629f8f810aceaacfcebd4c672ccc174f6 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Wed, 24 Jan 2024 00:55:24 +0900
Subject: [PATCH 15/21] =?UTF-8?q?vue-slider-component=E3=82=92=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E3=81=97=E3=81=9F=EF=BC=88=E8=89=B2=E6=9C=AA=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/ASlider.vue            |  2 ++
 src/components/UI/FormInput.vue          | 20 +--------------
 src/components/UI/FormRangeWithValue.vue | 32 ++++++++++++++----------
 src/views/Settings/QallTab.vue           |  4 +--
 4 files changed, 24 insertions(+), 34 deletions(-)

diff --git a/src/components/UI/ASlider.vue b/src/components/UI/ASlider.vue
index a6d58b92e..a7665909f 100644
--- a/src/components/UI/ASlider.vue
+++ b/src/components/UI/ASlider.vue
@@ -4,6 +4,7 @@
     :min="min"
     :max="max"
     :disabled="disabled"
+    :interval="interval"
     :tooltip="tooltip"
     :tooltip-formatter="tooltipFormatter"
     :dot-size="12"
@@ -27,6 +28,7 @@ const props = withDefaults(
     max?: number
     tooltipFormatter?: TooltipFormatter
     tooltip?: TooltipProp
+    interval?: number
   }>(),
   {
     disabled: false,
diff --git a/src/components/UI/FormInput.vue b/src/components/UI/FormInput.vue
index 3e304840d..466a5bddb 100644
--- a/src/components/UI/FormInput.vue
+++ b/src/components/UI/FormInput.vue
@@ -128,6 +128,7 @@ defineExpose({ focus })
 }
 .inputContainer {
   @include color-ui-primary;
+  @include background-secondary;
   @include size-body1;
   height: 30px;
   display: flex;
@@ -140,25 +141,6 @@ defineExpose({ focus })
   &:focus-within {
     border-color: $theme-accent-focus-default;
   }
-  &:has(.input:not([type='range'])) {
-    @include background-secondary;
-  }
-}
-
-.input[type='range'] {
-  appearance: none;
-}
-.input[type='range']::-webkit-slider-runnable-track {
-  background: $theme-ui-secondary-background;
-  height: 4px;
-  border-radius: 4px;
-}
-.input[type='range']::-webkit-slider-thumb {
-  appearance: none;
-  height: 12px;
-  width: 12px;
-  @include background-accent-primary;
-  border-radius: 50%;
 }
 .prefix {
   margin-left: 8px;
diff --git a/src/components/UI/FormRangeWithValue.vue b/src/components/UI/FormRangeWithValue.vue
index 4148ca3ca..d868a7181 100644
--- a/src/components/UI/FormRangeWithValue.vue
+++ b/src/components/UI/FormRangeWithValue.vue
@@ -1,12 +1,13 @@
 <template>
   <div :class="$style.container">
-    <form-input
+    <a-slider
       v-model.number="value"
       :class="$style.range"
-      type="range"
       :min="min"
-      :step="step"
       :max="max"
+      :disabled="disabled"
+      :tooltip="'none'"
+      :interval="interval"
     />
     <semi-fixed-size-text
       align="right"
@@ -18,18 +19,23 @@
 
 <script lang="ts" setup>
 import { computed } from 'vue'
-import FormInput from '/@/components/UI/FormInput.vue'
 import { useModelValueSyncer } from '/@/composables/useModelSyncer'
 import SemiFixedSizeText from './SemiFixedSizeText.vue'
+import ASlider from '/@/components/UI/ASlider.vue'
 
-const props = defineProps<{
-  modelValue: number
-  maxText: string
-  min?: string
-  max?: string
-  step?: string
-  format: (v: number) => string
-}>()
+const props = withDefaults(
+  defineProps<{
+    modelValue: number
+    maxText: string
+    min?: string
+    max?: string
+    disabled?: boolean
+    interval?: number
+    format: (v: number) => string
+  }>(), 
+  {
+    disabled: false
+  })
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: number): void
@@ -47,6 +53,6 @@ const showValue = computed(() => props.format(value.value))
 }
 .range {
   flex: 1 1;
-  margin-right: 4px;
+  margin-right: 16px;
 }
 </style>
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index cade7ba22..29b798045 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -74,8 +74,8 @@
           v-model="state.masterVolume"
           max-text="100%"
           min="0"
-          step="0.005"
           max="1"
+          interval="0.005"
           :format="formatMasterVolume"
         />
       </section>
@@ -89,8 +89,8 @@
           v-model="state.noiseGateThreshold"
           max-text="-100dB"
           min="-100"
-          step="1"
           max="0"
+          interval="1"
           :format="formatNoiseGateThreshold"
           :class="$style.noiseGate"
         />

From b473e7753c865aa9da8250696c60bb74a68c4dcc Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Wed, 24 Jan 2024 00:58:53 +0900
Subject: [PATCH 16/21] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=9E?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormRangeWithValue.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/UI/FormRangeWithValue.vue b/src/components/UI/FormRangeWithValue.vue
index d868a7181..2b7695b7d 100644
--- a/src/components/UI/FormRangeWithValue.vue
+++ b/src/components/UI/FormRangeWithValue.vue
@@ -32,10 +32,11 @@ const props = withDefaults(
     disabled?: boolean
     interval?: number
     format: (v: number) => string
-  }>(), 
+  }>(),
   {
     disabled: false
-  })
+  }
+)
 
 const emit = defineEmits<{
   (e: 'update:modelValue', v: number): void

From 2fa1e4adf4cbf2dcd1d62c423025e9fc6aa8f575 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Wed, 24 Jan 2024 01:07:06 +0900
Subject: [PATCH 17/21] =?UTF-8?q?=E3=83=87=E3=83=BC=E3=82=BF=E5=9E=8B?=
 =?UTF-8?q?=E3=81=AE=E7=B5=B1=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormRangeWithValue.vue |  4 ++--
 src/views/Settings/QallTab.vue           | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/components/UI/FormRangeWithValue.vue b/src/components/UI/FormRangeWithValue.vue
index 2b7695b7d..bbbd6f698 100644
--- a/src/components/UI/FormRangeWithValue.vue
+++ b/src/components/UI/FormRangeWithValue.vue
@@ -27,8 +27,8 @@ const props = withDefaults(
   defineProps<{
     modelValue: number
     maxText: string
-    min?: string
-    max?: string
+    min?: number
+    max?: number
     disabled?: boolean
     interval?: number
     format: (v: number) => string
diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 29b798045..199ee6399 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -73,9 +73,9 @@
         <form-range-with-value
           v-model="state.masterVolume"
           max-text="100%"
-          min="0"
-          max="1"
-          interval="0.005"
+          min=0
+          max=1
+          interval=0.005
           :format="formatMasterVolume"
         />
       </section>
@@ -88,9 +88,9 @@
         <form-range-with-value
           v-model="state.noiseGateThreshold"
           max-text="-100dB"
-          min="-100"
-          max="0"
-          interval="1"
+          min=-100
+          max=0
+          interval=1
           :format="formatNoiseGateThreshold"
           :class="$style.noiseGate"
         />

From 3c61a3ad5aea08cc35d298f05ff161e72112d41f Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Wed, 24 Jan 2024 01:21:29 +0900
Subject: [PATCH 18/21] =?UTF-8?q?=E3=83=95=E3=82=A9=E3=83=BC=E3=83=9E?=
 =?UTF-8?q?=E3=83=83=E3=83=88=E5=86=8D=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/QallTab.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 199ee6399..29b798045 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -73,9 +73,9 @@
         <form-range-with-value
           v-model="state.masterVolume"
           max-text="100%"
-          min=0
-          max=1
-          interval=0.005
+          min="0"
+          max="1"
+          interval="0.005"
           :format="formatMasterVolume"
         />
       </section>
@@ -88,9 +88,9 @@
         <form-range-with-value
           v-model="state.noiseGateThreshold"
           max-text="-100dB"
-          min=-100
-          max=0
-          interval=1
+          min="-100"
+          max="0"
+          interval="1"
           :format="formatNoiseGateThreshold"
           :class="$style.noiseGate"
         />

From 5c9b05c6ad1b1127da82a5f9e764a4cba221f37f Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Wed, 24 Jan 2024 01:43:37 +0900
Subject: [PATCH 19/21] =?UTF-8?q?=E3=83=87=E3=83=BC=E3=82=BF=E5=9E=8B?=
 =?UTF-8?q?=E3=81=AE=E4=BF=AE=E6=AD=A3=E3=82=92=E8=A9=A6=E3=81=BF=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/Settings/QallTab.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/views/Settings/QallTab.vue b/src/views/Settings/QallTab.vue
index 29b798045..8d52a5281 100644
--- a/src/views/Settings/QallTab.vue
+++ b/src/views/Settings/QallTab.vue
@@ -73,9 +73,9 @@
         <form-range-with-value
           v-model="state.masterVolume"
           max-text="100%"
-          min="0"
-          max="1"
-          interval="0.005"
+          :min="0"
+          :max="1"
+          :interval="0.005"
           :format="formatMasterVolume"
         />
       </section>
@@ -88,9 +88,9 @@
         <form-range-with-value
           v-model="state.noiseGateThreshold"
           max-text="-100dB"
-          min="-100"
-          max="0"
-          interval="1"
+          :min="-100"
+          :max="0"
+          :interval="1"
           :format="formatNoiseGateThreshold"
           :class="$style.noiseGate"
         />

From 4689e71747b52e8eed8906f7aadb41c2fae996b5 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Sat, 27 Jan 2024 20:27:42 +0900
Subject: [PATCH 20/21] =?UTF-8?q?=E3=82=B9=E3=83=A9=E3=82=A4=E3=83=80?=
 =?UTF-8?q?=E3=81=AE=E8=89=B2=E3=82=92=E8=AA=BF=E6=95=B4=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormRangeWithValue.vue | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/UI/FormRangeWithValue.vue b/src/components/UI/FormRangeWithValue.vue
index bbbd6f698..34f943ddd 100644
--- a/src/components/UI/FormRangeWithValue.vue
+++ b/src/components/UI/FormRangeWithValue.vue
@@ -55,5 +55,14 @@ const showValue = computed(() => props.format(value.value))
 .range {
   flex: 1 1;
   margin-right: 16px;
+  :global {
+    $dotBgColor: $theme-accent-primary-background;
+    $dotShadow: none;
+
+    $bgColor: rgba(107, 125, 138, 0.5); // $theme-ui-secondary-default;
+    $themeColor: $theme-accent-primary-background;
+
+    @import 'vue-slider-component/lib/theme/default.scss';
+  }
 }
 </style>

From 1942bf9ec8f9b01c307ea3f3cc5929e8851d3550 Mon Sep 17 00:00:00 2001
From: damin3A3 <kimura.r.ah@m.titech.ac.jp>
Date: Mon, 29 Jan 2024 14:43:38 +0900
Subject: [PATCH 21/21] =?UTF-8?q?=E3=82=B9=E3=83=A9=E3=82=A4=E3=83=80?=
 =?UTF-8?q?=E3=83=BC=E3=81=AE=E3=82=AF=E3=83=AA=E3=83=83=E3=82=AF=E7=AF=84?=
 =?UTF-8?q?=E5=9B=B2=E3=82=92=E5=BA=83=E3=81=8F=E3=81=97=E3=81=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/FormRangeWithValue.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/UI/FormRangeWithValue.vue b/src/components/UI/FormRangeWithValue.vue
index 34f943ddd..a00a78fa9 100644
--- a/src/components/UI/FormRangeWithValue.vue
+++ b/src/components/UI/FormRangeWithValue.vue
@@ -8,6 +8,7 @@
       :disabled="disabled"
       :tooltip="'none'"
       :interval="interval"
+      :style="{ padding: '24px 0' }"
     />
     <semi-fixed-size-text
       align="right"