From 2e7d45bc545fdecd92fa791b69b5cfbc8f0cc999 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Wed, 22 Feb 2023 19:38:55 -0800
Subject: fee slider wip

---
 src/components/Slider.svelte | 56 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/Slider.svelte

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

diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
new file mode 100644
index 00000000..84482c9d
--- /dev/null
+++ b/src/components/Slider.svelte
@@ -0,0 +1,56 @@
+<script>
+	export let value,
+		handle,
+		min = 0,
+		max = 100;
+</script>
+
+<input
+	id="slider"
+	type="range"
+	{min}
+	{max}
+ bind:value={value}
+	class="px-0 py-0 my-5"
+	style="--bgPercent: {(value - min) * 100/(max - min)}%;"
+	on:input={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