replace range by buttons

willpinha · Jan 19, 2024 · b79e5d2 · b79e5d2
1 parent afd9511
commit b79e5d2
Showing 1 changed file with 25 additions and 2 deletions.
diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
@@ -1,12 +1,35 @@
 <script lang="ts">
     import { chroma, copied } from "../stores";
+
+    const max = 0.37;
+    const increment = 0.01;
+
+    $: {
+        if ($chroma < 0) {
+            $chroma += increment;
+        }
+
+        if ($chroma > max) {
+            $chroma -= increment;
+        }
+
+        $chroma = parseFloat($chroma.toFixed(2));
+    }
 </script>
 
 <div class="flex justify-center w-full p-4 fixed top-0">
     <nav class="navbar flex-col bg-base-200 max-w-md rounded-box shadow min-h-0">
         <div class="flex justify-between w-full">
-            <div class="flex gap-2">
-                <input class="range range-sm range-primary" type="range" min="0" max="0.37" step="0.01" bind:value={$chroma} />
+            <div class="flex items-center gap-2">
+                <div class="join">
+                    <button class="join-item btn btn-primary btn-sm" on:click={() => $chroma-=increment }>
+                        <i class="fa-solid fa-minus"></i>
+                    </button>
+
+                    <button class="join-item btn btn-primary btn-sm" on:click={() => $chroma+=increment }>
+                        <i class="fa-solid fa-plus"></i>
+                    </button>
+                </div>
 
                 <span class="text-sm">{$chroma}C</span>
             </div>