diff --git a/.prettierrc b/.prettierrc
index a99b3aa61..d97685376 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
 {
 	"singleQuote": true,
-	"printWidth": 100
+	"printWidth": 100,
+    "tabWidth": 4
 }
diff --git a/src/package/components/Slider.svelte b/src/package/components/Slider.svelte
new file mode 100644
index 000000000..0f60948a4
--- /dev/null
+++ b/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>
diff --git a/src/package/index.ts b/src/package/index.ts
index 12dbd512f..d8b43b26e 100644
--- a/src/package/index.ts
+++ b/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';
 
 
 
 
-
diff --git a/src/routes/components/FormField.md b/src/routes/components/FormField.md
index 172470aa8..279779063 100644
--- a/src/routes/components/FormField.md
+++ b/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>
diff --git a/src/routes/components/Slider.md b/src/routes/components/Slider.md
new file mode 100644
index 000000000..666ae4a99
--- /dev/null
+++ b/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 />
+```