Skip to content

Commit 75cc6d3

Browse files
ariflogsariflogs
committed
main merged
2 parents df2b556 + ecf1e27 commit 75cc6d3

File tree

9 files changed

+231
-7
lines changed

9 files changed

+231
-7
lines changed

‎components/retroui/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -16,4 +16,5 @@ export * from "./Badge";
1616
export * from "./Tab";
1717
export * from "./Dialog";
1818
export * from "./Menu";
19+
export * from "./Slider";
1920
export * from "./Progress";

‎components/ui/Slider/Slider.tsx

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
"use client";
2+
import { forwardRef, useMemo } from "react";
3+
import * as SliderPrimitive from "@radix-ui/react-slider";
4+
import { cn } from "@/lib/utils";
5+
import { cva } from "class-variance-authority";
6+
7+
const sliderVariants = cva("relative w-full grow", {
8+
variants: {
9+
variant: {
10+
default: "h-5.5",
11+
thin: "h-4",
12+
},
13+
},
14+
defaultVariants: {
15+
variant: "default",
16+
},
17+
});
18+
19+
interface SliderProps
20+
extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
21+
variant?: "default" | "thin";
22+
}
23+
24+
const Slider = forwardRef<
25+
React.ComponentRef<typeof SliderPrimitive.Root>,
26+
SliderProps
27+
>(
28+
(
29+
{
30+
variant = "default",
31+
className,
32+
defaultValue,
33+
value,
34+
min = 0,
35+
max = 100,
36+
...props
37+
},
38+
ref
39+
) => {
40+
const _values = useMemo(
41+
() =>
42+
Array.isArray(value)
43+
? value
44+
: Array.isArray(defaultValue)
45+
? defaultValue
46+
: [min, max],
47+
[value, defaultValue, min, max]
48+
);
49+
50+
return (
51+
<div className="space-y-2">
52+
<div className="relative">
53+
<SliderPrimitive.Root
54+
ref={ref}
55+
defaultValue={defaultValue}
56+
value={value}
57+
min={min}
58+
max={max}
59+
className={cn(
60+
"relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50",
61+
className
62+
)}
63+
{...props}
64+
>
65+
<SliderPrimitive.Track
66+
className={cn(
67+
sliderVariants({ variant }),
68+
"overflow-hidden border-2 border-black bg-white shadow-[4px_4px_0_0_rgba(0,0,0,1)]"
69+
)}
70+
>
71+
<SliderPrimitive.Range className="absolute h-full bg-primary" />
72+
</SliderPrimitive.Track>
73+
{_values.map((_, index) => (
74+
<SliderPrimitive.Thumb
75+
key={index}
76+
className={cn(
77+
"block transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
78+
variant === "default"
79+
? "h-5 w-5 border-2 border-black bg-white"
80+
: "h-4 w-4 border-2 border-black bg-white"
81+
)}
82+
>
83+
<div className="absolute inset-0 -translate-x-[2px] -translate-y-[2px] border-2 border-black transition-transform hover:-translate-y-1 active:translate-y-0 bg-white group-data-[disabled]:pointer-events-none">
84+
<div className="absolute inset-x-0 -top-1 h-[2px] bg-black/10" />
85+
<div className="absolute inset-x-0 -bottom-1 h-[2px] bg-black/10" />
86+
</div>
87+
</SliderPrimitive.Thumb>
88+
))}
89+
</SliderPrimitive.Root>
90+
</div>
91+
</div>
92+
);
93+
}
94+
);
95+
96+
Slider.displayName = "Slider";
97+
98+
export { Slider };

‎components/ui/Slider/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from "./Slider"

‎config/components.ts

+19
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,11 @@ export const componentConfig: {
7979
name: "text",
8080
filePath: "components/retroui/Text.tsx",
8181
},
82+
slider: {
83+
name: "slider",
84+
dependencies: ["@radix-ui/react-slider"],
85+
filePath: "components/ui/Slider.tsx",
86+
}
8287
},
8388
examples: {
8489
"accordion-style-default": {
@@ -326,5 +331,19 @@ export const componentConfig: {
326331
() => import("@/preview/components/dialog-style-with-form"),
327332
),
328333
},
334+
"slider-style-default":{
335+
name: "slider-style-default",
336+
filePath: "preview/components/slider-style-default.tsx",
337+
preview: lazy(
338+
() => import("@/preview/components/slider-style-default")
339+
),
340+
},
341+
"slider-style-thin":{
342+
name:"slider-style-thin",
343+
filePath: "preview/components/slider-style-thin.tsx",
344+
preview: lazy(
345+
() => import("@/preview/components/slider-style-thin")
346+
),
347+
},
329348
},
330349
};

‎content/docs/components/slider.mdx

+54
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
title: Slider
3+
description: A customizable slider component with two variants.
4+
lastUpdated: 25 Mar, 2025
5+
links:
6+
api_reference: https://www.radix-ui.com/docs/primitives/components/slider#api-reference
7+
source: https://github.com/Logging-Stuff/RetroUI/blob/main/components/ui/Slider.tsx
8+
---
9+
10+
<ComponentShowcase name="slider-style-default" />
11+
<br />
12+
<br />
13+
14+
## Installation
15+
16+
<ComponentInstall>
17+
<ComponentInstall.Cli>
18+
```sh
19+
npx shadcn@latest add "https://retroui.dev/r/slider.json"
20+
```
21+
</ComponentInstall.Cli>
22+
<ComponentInstall.Manual>
23+
24+
#### 1. Install dependencies:
25+
26+
```sh
27+
npm install @radix-ui/react-slider
28+
```
29+
30+
<br />
31+
32+
#### 2. Copy the code 👇 into your project:
33+
34+
<ComponentSource name="slider" />
35+
36+
</ComponentInstall.Manual>
37+
</ComponentInstall>
38+
39+
<br />
40+
<br />
41+
42+
## Examples
43+
44+
### Default
45+
46+
<ComponentShowcase name="slider-style-default" />
47+
<br />
48+
<br />
49+
50+
### Thin
51+
52+
<ComponentShowcase name="slider-style-thin" />
53+
<br />
54+
<br />

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@radix-ui/react-progress": "^1.1.2",
2121
"@radix-ui/react-radio-group": "^1.2.3",
2222
"@radix-ui/react-select": "^2.1.6",
23+
"@radix-ui/react-slider": "^1.2.3",
2324
"@radix-ui/react-switch": "^1.1.3",
2425
"@radix-ui/react-visually-hidden": "^1.1.0",
2526
"class-variance-authority": "^0.7.0",

‎pnpm-lock.yaml

+7-7
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎preview/components/slider-style-default.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Slider } from "@/components/ui"
2+
import { Label } from "@/components/ui"
3+
4+
export default function SliderDefault() {
5+
return (
6+
<div className="p-6 max-w-md mx-auto">
7+
<div className="mb-6">
8+
<Label
9+
htmlFor="default-slider"
10+
className="block text-sm font-medium mb-2"
11+
>
12+
Slider control
13+
</Label>
14+
<Slider
15+
defaultValue={[50]}
16+
min={0}
17+
max={100}
18+
step={1}
19+
variant="default"
20+
aria-label="Slider Control"
21+
/>
22+
</div>
23+
</div>
24+
);
25+
}

‎preview/components/slider-style-thin.tsx

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Slider } from "@/components/ui";
2+
import { Label } from "@/components/ui"
3+
4+
export default function SliderDefault() {
5+
return (
6+
<div className="p-6 max-w-md mx-auto">
7+
<div className="mb-6">
8+
<Label
9+
htmlFor="default-slider"
10+
className="block text-sm font-medium mb-2"
11+
>
12+
Volume Control
13+
</Label>
14+
<Slider
15+
defaultValue={[45]}
16+
min={0}
17+
max={100}
18+
step={1}
19+
variant="thin"
20+
aria-label="Volume Control"
21+
/>
22+
</div>
23+
</div>
24+
);
25+
}

0 commit comments

Comments
 (0)