From 3f6348c49c60d80ff21fa7eb31520e9aa9236182 Mon Sep 17 00:00:00 2001
From: Rune Harlyk <rune@harlyk.dk>
Date: Sat, 17 Aug 2024 19:23:49 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=9A=EF=B8=8F=20Adds=20a=20vertical=20s?=
 =?UTF-8?q?lider=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/input/vertical-slider.svelte   | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 app/src/lib/components/input/vertical-slider.svelte

diff --git a/app/src/lib/components/input/vertical-slider.svelte b/app/src/lib/components/input/vertical-slider.svelte
new file mode 100644
index 0000000..bb0dee0
--- /dev/null
+++ b/app/src/lib/components/input/vertical-slider.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+    export let min = 0;
+    export let max = 100;
+    export let step = 1;
+    export let value = (max - min) / 2;
+</script>
+  
+<input
+    type="range"
+    orient="vertical"
+    min={min}
+    max={max}
+    step={step}
+    bind:value
+    on:input
+    on:change
+/>
+
+<style>
+input[type=range][orient=vertical] {
+  -webkit-appearance: slider-vertical;
+  width: 1rem;
+  height: 100%;
+  border-radius: var(--rounded-box, 1rem);
+}
+
+input[type=range][orient=vertical]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  border: 5px solid #000000;
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  background: black;
+}
+
+input[type=range][orient=vertical]::-webkit-slider-runnable-track {
+  cursor: pointer;
+  background: oklch(var(--p)/1);
+  border-radius: var(--rounded-box, 1rem);
+}
+</style>
\ No newline at end of file