🎚️ Adds a vertical slider component

2024-08-17 19:23:49 +02:00
parent 0ccd54ba53
commit 3f6348c49c
1 changed files with 41 additions and 0 deletions
@@ -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>