added design elements to the slider

components/ImageUploader.tsx

@@ -48,9 +48,10 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange
     setImageLoaded(true);
   }
 
-  const zoomSliderHandler = (e) => {
-    console.log(e.target);
-    // setZoom(e.target.value);
+  const handleZoomSliderChange = ([value]) => {
+    console.log(value);
+    value < 1 ? setZoom(1) : setZoom(value);
+    // setZoom(e[0]);
   }
 
   const createImage = (url) =>
@@ -190,12 +191,12 @@ export default function ImageUploader({target, id, buttonMsg, handleAvatarChange
                         />
                       </div> 
                       <Slider 
-                        value="1" 
-                        min="1"
-                        max="3" 
-                        step="0.1" 
-                        label="Slide to zoom, drag to reposition" 
-                        changeHandler={zoomSliderHandler}
+                          value={zoom}
+                          min="1"
+                          max="3"
+                          step="0.1"
+                          label="Slide to zoom, drag to reposition"
+                          changeHandler={handleZoomSliderChange}
                       />
                     </div>
                   }

components/Slider.tsx

@@ -6,12 +6,12 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 const Slider = ({value, min, max, step, label, changeHandler}) => (
     <SliderPrimitive.Root 
     className="slider"
-    defaultValue={value} 
+    // defaultValue={[value]}
+    step={step}
     max={max}
-    min={min} 
-    step={step} 
+    value={[value]} 
     aria-label={label}
-    // onValueChange={changeHandler}
+    onValueChange={changeHandler}
     >
         <SliderPrimitive.Track className="slider-track">
             <SliderPrimitive.Range className="slider-range" />