From 596490878ca5ae2b8a86cb830918789d3af682a5 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Wed, 20 Nov 2024 14:22:43 -0800
Subject: styles

---
 src/components/Slider.svelte | 47 ++------------------------------------------
 1 file changed, 2 insertions(+), 45 deletions(-)

(limited to 'src/components/Slider.svelte')

diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
index 137c28b4..401b415a 100644
--- a/src/components/Slider.svelte
+++ b/src/components/Slider.svelte
@@ -6,12 +6,7 @@
     max?: number;
   }
 
-  let {
-    value = $bindable(),
-    handle,
-    min = 0,
-    max = 100
-  }: Props = $props();
+  let { value = $bindable(), handle, min = 0, max = 100 }: Props = $props();
 </script>
 
 <input
@@ -20,46 +15,8 @@
   {min}
   {max}
   bind:value
-  class="px-0 py-0 my-5"
-  style="--bgPercent: {((value - min) * 100) / (max - min)}%;"
+  class="range"
   oninput={handle}
 />
 
-<style>
-  #slider {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 6px;
-    border-radius: 5px;
-    background: linear-gradient(
-      to right,
-      black 0%,
-      black var(--bgPercent),
-      #f5f7fa var(--bgPercent),
-      #f5f7fa 100%
-    );
-    outline: none;
-  }
-
-  #slider:active {
-    background-color: black;
-  }
 
-  #slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background: black;
-    cursor: pointer;
-  }
-
-  #slider::-moz-range-thumb {
-    width: 30px;
-    height: 30px;
-    border-radius: 50%;
-    background: black;
-    cursor: pointer;
-  }
-</style>
-- 
cgit v1.2.3