feat: add min max and step to slider (#2999)

Author: Kitenite

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/border.tsx

@@ -117,6 +117,9 @@ export const Border = observer(() => {
                         onChange={(value) => handleBoxChange('borderWidth', value.toString())}
                         unit={boxState.borderWidth.unit}
                         onUnitChange={(unit) => handleUnitChange('borderWidth', unit)}
+                        min={0}
+                        max={16}
+                        step={0.25}
                     />
                 ) : (
                     <SpacingInputs

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/margin.tsx

@@ -1,16 +1,14 @@
 'use client';
 
 import { useEditorEngine } from "@/components/store/editor";
-import { Button } from "@onlook/ui/button";
 import {
     DropdownMenu,
     DropdownMenuContent,
     DropdownMenuTrigger,
 } from "@onlook/ui/dropdown-menu";
 import { Icons } from "@onlook/ui/icons";
-import { cn } from "@onlook/ui/utils";
 import { observer } from "mobx-react-lite";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo, useState } from "react";
 import { useBoxControl } from "../hooks/use-box-control";
 import { useDropdownControl } from "../hooks/use-dropdown-manager";
 import { HoverOnlyTooltip } from "../hover-tooltip";
@@ -55,25 +53,25 @@ const MARGIN_ICON_MAP: Record<string, typeof Icons.MarginEmpty> = {
 export const Margin = observer(() => {
     const { boxState, handleBoxChange, handleUnitChange, handleIndividualChange } = useBoxControl('margin');
     const editorEngine = useEditorEngine();
-    
+
     const { isOpen, onOpenChange } = useDropdownControl({
         id: 'margin-dropdown'
     });
-    
-    
+
+
     const areAllMarginsEqual = useMemo((): boolean => {
         const margins = {
             top: boxState.marginTop.num ?? 0,
             right: boxState.marginRight.num ?? 0,
             bottom: boxState.marginBottom.num ?? 0,
             left: boxState.marginLeft.num ?? 0,
         };
-        
+
         const values = Object.values(margins);
-        
+
         return values.every(val => val === values[0]);
     }, [boxState.marginTop.num, boxState.marginRight.num, boxState.marginBottom.num, boxState.marginLeft.num]);
-    
+
     const [activeTab, setActiveTab] = useState<MarginTab>(areAllMarginsEqual ? MarginTab.ALL : MarginTab.INDIVIDUAL);
 
     const getMarginIcon = () => {
@@ -86,13 +84,13 @@ export const Margin = observer(() => {
 
         const values = Object.values(margins);
         const nonZeroValues = values.filter(val => val > 0);
-        
+
         if (nonZeroValues.length === 0) {
             return Icons.MarginEmpty;
         }
 
-        const allSame = nonZeroValues.length === 4 && 
-                        nonZeroValues.every(val => val === nonZeroValues[0]);
+        const allSame = nonZeroValues.length === 4 &&
+            nonZeroValues.every(val => val === nonZeroValues[0]);
         if (allSame) {
             return Icons.MarginFull;
         }
@@ -192,6 +190,9 @@ export const Margin = observer(() => {
                         onChange={(value) => handleBoxChange('margin', value.toString())}
                         unit={boxState.margin.unit}
                         onUnitChange={(unit) => handleUnitChange('margin', unit)}
+                        min={0}
+                        max={384}
+                        step={16}
                     />
                 ) : (
                     <SpacingInputs

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/padding.tsx

@@ -164,6 +164,9 @@ export const Padding = observer(() => {
                         onChange={(value) => handleBoxChange('padding', value.toString())}
                         unit={boxState.padding.unit}
                         onUnitChange={(unit) => handleUnitChange('padding', unit)}
+                        min={0}
+                        max={384}
+                        step={16}
                     />
                 ) : (
                     <SpacingInputs

apps/web/client/src/app/project/[id]/_components/editor-bar/dropdowns/radius.tsx

@@ -145,6 +145,9 @@ export const Radius = observer(() => {
                         onChange={(value) => handleBoxChange('borderRadius', value.toString())}
                         unit={boxState.borderRadius.unit}
                         onUnitChange={(unit) => handleUnitChange('borderRadius', unit)}
+                        min={0}
+                        max={32}
+                        step={2}
                     />
                 ) : (
                     <SpacingInputs

apps/web/client/src/app/project/[id]/_components/editor-bar/inputs/input-range.tsx

@@ -13,6 +13,9 @@ interface InputRangeProps {
     value: number;
     icon?: keyof typeof Icons;
     unit?: string;
+    min?: number;
+    max?: number;
+    step?: number;
     onChange?: (value: number) => void;
     onUnitChange?: (unit: string) => void;
 }
@@ -21,6 +24,9 @@ export const InputRange = ({
     value,
     icon,
     unit = 'px',
+    min = 0,
+    max = 500,
+    step = 1,
     onChange,
     onUnitChange,
 }: InputRangeProps) => {
@@ -58,6 +64,7 @@ export const InputRange = ({
     const handleBlur = () => {
         const numValue = Number(localValue);
         if (!isNaN(numValue)) {
+            setLocalValue(String(numValue));
             debouncedOnChange(numValue);
         } else {
             setLocalValue(String(value));
@@ -67,11 +74,11 @@ export const InputRange = ({
     const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
         if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
             e.preventDefault();
-            const step = e.shiftKey ? 10 : 1;
+            const stepValue = e.shiftKey ? step * 10 : step;
             const direction = e.key === 'ArrowUp' ? 1 : -1;
             const currentValue = Number(localValue);
             if (!isNaN(currentValue)) {
-                const newValue = currentValue + (step * direction);
+                const newValue = currentValue + (stepValue * direction);
                 setLocalValue(String(newValue));
                 debouncedOnChange(newValue);
             }
@@ -92,7 +99,7 @@ export const InputRange = ({
         if (isDragging && rangeRef.current) {
             const rect = rangeRef.current.getBoundingClientRect();
             const percentage = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-            const newValue = Math.round(percentage * 500);
+            const newValue = Math.round((percentage * (max - min) + min) / step) * step;
             setLocalValue(String(newValue));
             debouncedOnChange(newValue);
         }
@@ -110,8 +117,9 @@ export const InputRange = ({
                 <input
                     ref={rangeRef}
                     type="range"
-                    min="0"
-                    max="500"
+                    min={min}
+                    max={max}
+                    step={step}
                     value={Number(localValue)}
                     onChange={(e) => {
                         const newValue = Number(e.target.value);