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) => {
+  const handleZoomSliderChange = ([value]) => {
-    console.log(e.target);
+    console.log(value);
-    // setZoom(e.target.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" 
+                          value={zoom}
                           min="1"
                           max="3"
                           step="0.1"
                           label="Slide to zoom, drag to reposition"
-                        changeHandler={zoomSliderHandler}
+                          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]}
-    max={max}
-    min={min} 
     step={step}
+    max={max}
+    value={[value]} 
     aria-label={label}
-    // onValueChange={changeHandler}
+    onValueChange={changeHandler}
     >
         <SliderPrimitive.Track className="slider-track">
             <SliderPrimitive.Range className="slider-range" />