From 95978e02cdb6eec9329208456f5e045785db731a Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Wed, 16 Apr 2025 18:22:46 +0000
Subject: [PATCH 1/2] feat: add slider component

---
 site/src/components/Slider/Slider.stories.tsx | 57 +++++++++++++++++++
 site/src/components/Slider/Slider.tsx         | 38 +++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 site/src/components/Slider/Slider.stories.tsx
 create mode 100644 site/src/components/Slider/Slider.tsx

diff --git a/site/src/components/Slider/Slider.stories.tsx b/site/src/components/Slider/Slider.stories.tsx
new file mode 100644
index 0000000000000..480e12c090382
--- /dev/null
+++ b/site/src/components/Slider/Slider.stories.tsx
@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import React from "react";
+import { Slider } from "./Slider";
+
+const meta: Meta<typeof Slider> = {
+	title: "components/Slider",
+	component: Slider,
+	args: {},
+	argTypes: {
+		value: {
+			control: "number",
+			description: "The controlled value of the slider",
+		},
+		defaultValue: {
+			control: "number",
+			description: "The default value when initially rendered",
+		},
+		disabled: {
+			control: "boolean",
+			description:
+				"When true, prevents the user from interacting with the slider",
+		},
+	},
+};
+
+export default meta;
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {};
+
+export const Controlled: Story = {
+	render: (args) => {
+		const [value, setValue] = React.useState(50);
+		return (
+			<Slider {...args} value={[value]} onValueChange={([v]) => setValue(v)} />
+		);
+	},
+	args: { value: [50], min: 0, max: 100, step: 1 },
+};
+
+export const Uncontrolled: Story = {
+	args: { defaultValue: [30], min: 0, max: 100, step: 1 },
+};
+
+export const Disabled: Story = {
+	args: { defaultValue: [40], disabled: true },
+};
+
+export const MultipleThumbs: Story = {
+	args: {
+		defaultValue: [20, 80],
+		min: 0,
+		max: 100,
+		step: 5,
+		minStepsBetweenThumbs: 1,
+	},
+};
diff --git a/site/src/components/Slider/Slider.tsx b/site/src/components/Slider/Slider.tsx
new file mode 100644
index 0000000000000..86879596c33ae
--- /dev/null
+++ b/site/src/components/Slider/Slider.tsx
@@ -0,0 +1,38 @@
+/**
+ * Copied from shadc/ui on 04/16/2025
+ * @see {@link https://ui.shadcn.com/docs/components/slider}
+ */
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
+
+import { cn } from "utils/cn";
+
+export const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex w-full touch-none select-none items-center h-1.5",
+			className,
+		)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-surface-secondary data-[disabled]:opacity-40">
+			<SliderPrimitive.Range className="absolute h-full bg-content-primary" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb
+			className="block h-4 w-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
+			focus-visible:outline-none hover:border-content-primary
+			focus-visible:ring-0 focus-visible:ring-content-primary focus-visible:ring-offset-surface-primary
+			disabled:pointer-events-none data-[disabled]:opacity-100 data-[disabled]:border-border"
+		/>
+		<SliderPrimitive.Thumb
+			className="block h-4 w-4 rounded-full border border-solid border-surface-invert-secondary bg-surface-primary shadow transition-colors
+			focus-visible:outline-none hover:border-content-primary
+			focus-visible:ring-0 focus-visible:ring-content-primary focus-visible:ring-offset-surface-primary
+			disabled:pointer-events-none data-[disabled]:opacity-100 data-[disabled]:border-border"
+		/>
+	</SliderPrimitive.Root>
+));

From e705f07b1a54f1a8e6347cf796dc5ef8df81112a Mon Sep 17 00:00:00 2001
From: Jaayden Halko <jaayden.halko@gmail.com>
Date: Thu, 17 Apr 2025 09:34:47 +0000
Subject: [PATCH 2/2] chore: reorder styles

---
 site/src/components/Slider/Slider.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/site/src/components/Slider/Slider.tsx b/site/src/components/Slider/Slider.tsx
index 86879596c33ae..4fdd21353e963 100644
--- a/site/src/components/Slider/Slider.tsx
+++ b/site/src/components/Slider/Slider.tsx
@@ -14,8 +14,9 @@ export const Slider = React.forwardRef<
 	<SliderPrimitive.Root
 		ref={ref}
 		className={cn(
-			"relative flex w-full touch-none select-none items-center h-1.5",
+			"relative flex w-full items-center h-1.5",
 			className,
+			"touch-none select-none",
 		)}
 		{...props}
 	>