From 95978e02cdb6eec9329208456f5e045785db731a Mon Sep 17 00:00:00 2001 From: Jaayden Halko 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 = { + 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; + +export const Default: Story = {}; + +export const Controlled: Story = { + render: (args) => { + const [value, setValue] = React.useState(50); + return ( + 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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + + + + + + + +)); From e705f07b1a54f1a8e6347cf796dc5ef8df81112a Mon Sep 17 00:00:00 2001 From: Jaayden Halko 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<