diff --git a/components/ui/Slider/Slider.tsx b/components/ui/Slider/Slider.tsx new file mode 100644 index 0000000..7020425 --- /dev/null +++ b/components/ui/Slider/Slider.tsx @@ -0,0 +1,98 @@ +"use client"; +import { forwardRef, useMemo } from "react"; +import * as SliderPrimitive from "@radix-ui/react-slider"; +import { cn } from "@/lib/utils"; +import { cva } from "class-variance-authority"; + +const sliderVariants = cva("relative w-full grow", { + variants: { + variant: { + default: "h-5.5", + thin: "h-4", + }, + }, + defaultVariants: { + variant: "default", + }, +}); + +interface SliderProps + extends React.ComponentPropsWithoutRef { + variant?: "default" | "thin"; +} + +const Slider = forwardRef< + React.ComponentRef, + SliderProps +>( + ( + { + variant = "default", + className, + defaultValue, + value, + min = 0, + max = 100, + ...props + }, + ref + ) => { + const _values = useMemo( + () => + Array.isArray(value) + ? value + : Array.isArray(defaultValue) + ? defaultValue + : [min, max], + [value, defaultValue, min, max] + ); + + return ( +
+
+ + + + + {_values.map((_, index) => ( + +
+
+
+
+ + ))} + +
+
+ ); + } +); + +Slider.displayName = "Slider"; + +export { Slider }; diff --git a/components/ui/Slider/index.ts b/components/ui/Slider/index.ts new file mode 100644 index 0000000..d52204f --- /dev/null +++ b/components/ui/Slider/index.ts @@ -0,0 +1 @@ +export * from "./Slider" \ No newline at end of file diff --git a/components/ui/index.ts b/components/ui/index.ts index ba8f34c..161c4f2 100644 --- a/components/ui/index.ts +++ b/components/ui/index.ts @@ -16,4 +16,5 @@ export * from "./Badge"; export * from "./Tab"; export * from "./Dialog"; export * from "./Menu"; +export * from "./Slider"; export * from "./Progress"; diff --git a/config/components.ts b/config/components.ts index 770ebee..fd92cc8 100644 --- a/config/components.ts +++ b/config/components.ts @@ -79,6 +79,11 @@ export const componentConfig: { name: "text", filePath: "components/ui/Text.tsx", }, + slider: { + name: "slider", + dependencies: ["@radix-ui/react-slider"], + filePath: "components/ui/Slider.tsx", + } }, examples: { "accordion-style-default": { @@ -326,5 +331,19 @@ export const componentConfig: { () => import("@/preview/components/dialog-style-with-form") ), }, + "slider-style-default":{ + name: "slider-style-default", + filePath: "preview/components/slider-style-default.tsx", + preview: lazy( + () => import("@/preview/components/slider-style-default") + ), + }, + "slider-style-thin":{ + name:"slider-style-thin", + filePath: "preview/components/slider-style-thin.tsx", + preview: lazy( + () => import("@/preview/components/slider-style-thin") + ), + }, }, }; diff --git a/content/docs/components/slider.mdx b/content/docs/components/slider.mdx new file mode 100644 index 0000000..9269465 --- /dev/null +++ b/content/docs/components/slider.mdx @@ -0,0 +1,54 @@ +--- +title: Slider +description: A customizable slider component with two variants. +lastUpdated: 25 Mar, 2025 +links: + api_reference: https://www.radix-ui.com/docs/primitives/components/slider#api-reference + source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Slider.tsx +--- + + +
+
+ +## Installation + + + + ```sh + npx shadcn@latest add "https://retroui.dev/r/slider.json" + ``` + + + +#### 1. Install dependencies: + +```sh +npm install @radix-ui/react-slider +``` + +
+ +#### 2. Copy the code 👇 into your project: + + + + + + +
+
+ +## Examples + +### Default + + +
+
+ +### Thin + + +
+
\ No newline at end of file diff --git a/package.json b/package.json index f9b44c0..0ee01d9 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "@radix-ui/react-progress": "^1.1.2", "@radix-ui/react-radio-group": "^1.2.3", "@radix-ui/react-select": "^2.1.6", + "@radix-ui/react-slider": "^1.2.3", "@radix-ui/react-switch": "^1.1.3", "@radix-ui/react-visually-hidden": "^1.1.0", "class-variance-authority": "^0.7.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2bae35a..62145ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ importers: '@radix-ui/react-select': specifier: ^2.1.6 version: 2.1.6(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-slider': + specifier: ^1.2.3 + version: 1.2.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) '@radix-ui/react-switch': specifier: ^1.1.3 version: 1.1.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) @@ -1279,6 +1282,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-slider@1.2.3': + resolution: {integrity: sha512-nNrLAWLjGESnhqBqcCNW4w2nn7LxudyMzeB6VgdyAnFLC6kfQgnAjSL2v6UkQTnDctJBlxrmxfplWS4iYjdUTw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-slot@1.1.0': resolution: {integrity: sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==} peerDependencies: @@ -5309,6 +5325,25 @@ snapshots: '@types/react': 18.0.0 '@types/react-dom': 18.0.0 + '@radix-ui/react-slider@1.2.3(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0)': + dependencies: + '@radix-ui/number': 1.1.0 + '@radix-ui/primitive': 1.1.1 + '@radix-ui/react-collection': 1.1.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-context': 1.1.1(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-direction': 1.1.0(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-primitive': 2.0.2(@types/react-dom@18.0.0)(@types/react@18.0.0)(react-dom@18.0.0(react@18.0.0))(react@18.0.0) + '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-layout-effect': 1.1.0(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-previous': 1.1.0(@types/react@18.0.0)(react@18.0.0) + '@radix-ui/react-use-size': 1.1.0(@types/react@18.0.0)(react@18.0.0) + react: 18.0.0 + react-dom: 18.0.0(react@18.0.0) + optionalDependencies: + '@types/react': 18.0.0 + '@types/react-dom': 18.0.0 + '@radix-ui/react-slot@1.1.0(@types/react@18.0.0)(react@18.0.0)': dependencies: '@radix-ui/react-compose-refs': 1.1.0(@types/react@18.0.0)(react@18.0.0) diff --git a/preview/components/slider-style-default.tsx b/preview/components/slider-style-default.tsx new file mode 100644 index 0000000..d2c95f0 --- /dev/null +++ b/preview/components/slider-style-default.tsx @@ -0,0 +1,25 @@ +import { Slider } from "@/components/ui" +import { Label } from "@/components/ui" + +export default function SliderDefault() { + return ( +
+
+ + +
+
+ ); +} \ No newline at end of file diff --git a/preview/components/slider-style-thin.tsx b/preview/components/slider-style-thin.tsx new file mode 100644 index 0000000..6cd8ea6 --- /dev/null +++ b/preview/components/slider-style-thin.tsx @@ -0,0 +1,25 @@ +import { Slider } from "@/components/ui"; +import { Label } from "@/components/ui" + +export default function SliderDefault() { + return ( +
+
+ + +
+
+ ); +} \ No newline at end of file