From b79e5d26df547ebd98d31edb7d28a8c0a77c810c Mon Sep 17 00:00:00 2001
From: Willian Pinheiro <willpinhaaa@gmail.com>
Date: Fri, 19 Jan 2024 18:11:53 -0300
Subject: [PATCH] replace range by buttons

---
 src/components/Navbar.svelte | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar.svelte b/src/components/Navbar.svelte
index 17368af..98a37a1 100644
--- 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>