feat: adds scrub slider component #333

animata/form-controls/scrub-slider.stories.tsx

@@ -0,0 +1,19 @@
+import ScrubSlider from "@/animata/form-controls/scrub-slider";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Form Controls/Scrub Slider",
+  component: ScrubSlider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof ScrubSlider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};

animata/form-controls/scrub-slider.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import React, { useState } from "react";
+import { motion } from "framer-motion";
+
+interface ScrubSliderProps {
+  min?: number;
+  max?: number;
+  initialValue?: number;
+  tickStep?: number;
+}
+
+const ScrubSlider: React.FC<ScrubSliderProps> = ({
+  min = 0,
+  max = 100,
+  initialValue = 40,
+  tickStep = 5,
+}) => {
+  const [value, setValue] = useState<number>(initialValue);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
+
+  const calculateValue = (e: React.MouseEvent) => {
+    const rect = e.currentTarget.getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const newValue = Math.round((x / rect.width) * (max - min) + min);
+    return Math.max(min, Math.min(max, newValue));
+  };
+
+  const handleMouseMove = (e: React.MouseEvent) => {
+    if (isDragging) {
+      const newValue = calculateValue(e);
+      setValue(newValue);
+    }
+  };
+
+  const handleMouseDown = (e: React.MouseEvent) => {
+    const newValue = calculateValue(e);
+    setValue(newValue);
+    setIsDragging(true);
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const renderTicks = () => {
+    const ticks = [];
+    for (let i = min; i <= max; i += tickStep) {
+      ticks.push(
+        <div
+          key={i}
+          className="absolute h-8 w-0.5 bg-gray-300"
+          style={{
+            left: `${((i - min) / (max - min)) * 100}%`,
+            transform: "translateX(-50%)",
+          }}
+        />,
+      );
+    }
+    return ticks;
+  };
+
+  return (
+    <div
+      className="slider-container relative w-72 rounded-2xl bg-white p-4"
+      onMouseMove={handleMouseMove}
+      onMouseDown={handleMouseDown}
+      onMouseUp={handleMouseUp}
+      onMouseLeave={handleMouseUp}
+    >
+      <div className="relative h-8 w-full">{renderTicks()}</div>
+
+      <motion.div
+        className="indicator absolute -top-6 rounded-md bg-black px-2 py-1 text-white"
+        style={{
+          left: `${((value - min) / (max - min)) * 100}%`,
+          transform: "translateX(-50%)",
+        }}
+        animate={{
+          left: `${((value - min) / (max - min)) * 100}%`,
+        }}
+        transition={{ duration: 0.1 }}
+      >
+        {value}°C
+      </motion.div>
+
+      <input
+        type="range"
+        min={min}
+        max={max}
+        value={value}
+        className="range-slider pointer-events-none absolute top-0 h-2 w-full opacity-0"
+        readOnly
+      />
+    </div>
+  );
+};
+
+export default ScrubSlider;

config/docs.ts

@@ -184,6 +184,10 @@ const sidebarNav: SidebarNavItem[] = [
     title: "Floating Action Buttons",
     items: createLinks("fabs"),
   },
+  {
+    title: "Form controls",
+    items: createLinks("form-controls"),
+  },
 ]
   .filter((category) => Boolean(category.items?.length || category.label))
   .sort((a, b) => {

content/docs/form-controls/scrub-slider.mdx

@@ -0,0 +1,51 @@
+---
+title: Scrub Slider
+description: scrub slider component with animated progress and a dynamic indicator.
+author: sumedhakoranga
+---
+
+<ComponentPreview name="form-controls-scrub-slider--docs" />
+
+## Installation
+
+<Steps>
+<Step>Install dependencies</Step>
+
+```bash
+npm install framer-motion lucide-react
+```
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following to your tailwind.config.js file.
+
+```json
+module.exports = {
+  theme: {
+    extend: {
+    }
+  }
+}
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file `scrub-slider.tsx` inside the `components/animata/form-controls` directory.
+
+```bash
+mkdir -p components/animata/form-controls && touch components/animata/form-controls/scrub-slider.tsx
+```
+
+<Step>Paste the code</Step>
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/form-controls/scrub-slider.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [Sumedha Koranga](https://github.com/sumedhakoranga)