From b1660caa305cbc7182264468ba390144766a2182 Mon Sep 17 00:00:00 2001
From: frostime <frostime@foxmail.com>
Date: Wed, 28 Jun 2023 21:17:34 +0800
Subject: [PATCH] slider tooltips

---
 src/libs/setting-item.svelte | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/libs/setting-item.svelte b/src/libs/setting-item.svelte
index 74e08b5..b728cf4 100644
--- a/src/libs/setting-item.svelte
+++ b/src/libs/setting-item.svelte
@@ -13,7 +13,7 @@
         min: number;
         max: number;
         step: number;
-    } = {min: 0, max: 100, step: 1}; // Use it if type is slider
+    } = { min: 0, max: 100, step: 1 }; // Use it if type is slider
 
     const dispatch = createEventDispatcher();
 
@@ -76,15 +76,17 @@
         </select>
     {:else if type == "slider"}
         <!-- Slider -->
-        <input
-            class="b3-slider fn__size200"
-            id="fontSize"
-            min="{slider.min}"
-            max="{slider.max}"
-            step="{slider.step}"
-            type="range"
-            bind:value={settingValue}
-            on:change={changed}
-        />
+        <div class="b3-tooltips b3-tooltips__n" aria-label={settingValue}>
+            <input
+                class="b3-slider fn__size200"
+                id="fontSize"
+                min={slider.min}
+                max={slider.max}
+                step={slider.step}
+                type="range"
+                bind:value={settingValue}
+                on:change={changed}
+            />
+        </div>
     {/if}
 </label>