Add basic slider component

.prettierrc

@@ -1,4 +1,5 @@
 {
 	"singleQuote": true,
-	"printWidth": 100
+	"printWidth": 100,
+    "tabWidth": 4
 }

src/package/components/Slider.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    import type { SvelteComponent } from 'svelte';
+
+    export let value: number;
+    export let min: number;
+    export let max: number;
+    export let id: string = undefined;
+</script>
+
+<div class="slider">
+    <input class="slider-input" type="range" name={id} {min} {max} bind:value />
+    <span>{value}</span>
+</div>
+
+<style lang="postcss">
+    .slider {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+
+        .slider-input {
+            -webkit-appearance: none;
+            appearance: none;
+            border-radius: var(--rounded-sm);
+            box-shadow: var(--shadow-inset-sm);
+            background-color: var(--color-button-bg);
+            border: none;
+            padding: 0.25rem 0;
+            width: 20rem;
+            height: 0.5rem;
+            max-width: 100%;
+            cursor: pointer;
+
+            &::-webkit-slider-thumb {
+                cursor: ew-resize;
+                -webkit-appearance: none;
+                appearance: none;
+                width: 0.5rem;
+                height: 1.25rem;
+                border-radius: var(--rounded-sm);
+                background-color: var(--color-brand);
+
+                &:hover {
+                    background-color: var(--color-brand-dark);
+                }
+            }
+        }
+    }
+</style>

src/package/index.ts

@@ -18,9 +18,10 @@ export { default as Pagination } from './components/Pagination.svelte';
 
 export { default as Select } from './components/Select.svelte';
 
+export { default as Slider } from './components/Slider.svelte';
+
 export { default as TextInput } from './components/TextInput.svelte';
 
 
 
 
-

src/routes/components/FormField.md

@@ -1,9 +1,13 @@
 ```svelte example raised
 <script lang="ts">
     import { FormField } from "omorphia";
+    import { Slider } from "omorphia";
     import { TextInput } from "omorphia";
 </script>
 
+<FormField label="Favorite number">
+    <Slider min=0 max=100 value=69 />
+</FormField>
 <FormField label="Favorite color">
     <TextInput placeholder="Enter another color..." />
 </FormField>

src/routes/components/Slider.md

@@ -0,0 +1,7 @@
+```svelte example
+<script lang="ts">
+    import { Slider } from "omorphia";
+</script>
+
+<Slider min=0 max=10 value=4 />
+```