first

src/workspaces/components/Slider/index.tsx

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'react';
+import { Slider as ShadSlider } from '@/components/ui/slider';
+import { cn } from 'helpers/cn';
+import './slider.css';
+
+type SliderProps = {
+  small?: boolean;
+} & ComponentProps<typeof ShadSlider>;
+
+export const Slider = ({ className, disabled, small, value, ...props }: SliderProps) => {
+  return (
+    <ShadSlider
+      disabled={disabled}
+      value={value}
+      className={cn('shad-slider', disabled && 'disabled', small && 'small', className)}
+      {...props}
+    />
+  );
+};

src/workspaces/components/Slider/slider.css

@@ -0,0 +1,15 @@
+.shad-slider.disabled {
+  opacity: 0.5;
+}
+
+.shad-slider.small span:first-child {
+  height: 0.25rem;
+}
+
+.shad-slider.small span:nth-child(2) {
+}
+
+.shad-slider.small span:nth-child(2) span {
+  height: 0.75rem;
+  width: 0.75rem;
+}