adds trails page

web/src/lib/components/base/slider.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import noUiSlider from "noUiSlider";
+    import "nouislider/dist/nouislider.css";
+    import { onMount } from "svelte";
+
+    export let minValue = 0;
+    export let maxValue = 100;
+
+    export let currentValue = maxValue / 2;
+
+    let sliderContainer: any;
+
+    onMount(() => {
+        const updateValues = (values: string[]) => {
+            currentValue = parseFloat(values[0]);
+        };
+
+        noUiSlider.create(sliderContainer, {
+            start: currentValue,
+            connect: [true, false],
+            range: {
+                min: minValue,
+                max: maxValue,
+            },
+        });
+
+        sliderContainer.noUiSlider.on("update", updateValues);
+    });
+</script>
+
+<div class="my-4" id="slider" bind:this={sliderContainer}></div>
+
+<style>
+    :global(.noUi-horizontal) {
+        height: 6px;
+    }
+    :global(.noUi-connect) {
+        @apply bg-primary;
+    }
+
+    :global(.noUi-horizontal .noUi-handle) {
+        @apply rounded-full w-7 h-7 -top-3;
+    }
+
+    :global(.noUi-handle::before) {
+        @apply content-none;
+    }
+
+    :global(.noUi-handle::after) {
+        @apply content-none;
+    }
+</style>