slider tooltips

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
+        <div class="b3-tooltips b3-tooltips__n" aria-label={settingValue}>
-            class="b3-slider fn__size200"
+            <input
-            id="fontSize"
+                class="b3-slider fn__size200"
-            min="{slider.min}"
+                id="fontSize"
-            max="{slider.max}"
+                min={slider.min}
-            step="{slider.step}"
+                max={slider.max}
-            type="range"
+                step={slider.step}
-            bind:value={settingValue}
+                type="range"
-            on:change={changed}
+                bind:value={settingValue}
-        />
+                on:change={changed}
+            />
+        </div>
     {/if}
 </label>