feat: add slider component (#17431)

jaaydenh · web-flow · commit 67a912796a71 · 2025-04-17T06:27:18.000-04:00
The slider component is part of the components supported by Dynamic Parameters There are no Figma designs for the slider component. This is based on the shadcn slider. <img width="474" alt="Screenshot 2025-04-16 at 19 26 11" src="https://github.com/user-attachments/assets/87370a22-4984-48f7-875b-105568739003" />
diff --git a/site/src/components/Slider/Slider.stories.tsx 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
@@ -0,0 +1,39 @@
+/**
+ * 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 items-center h-1.5",
+			className,
+			"touch-none select-none",
+		)}
+		{...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>
+));
