From c3959e3cd47945ca7a54eb4af745d955f45d5455 Mon Sep 17 00:00:00 2001
From: Syed Ali Shahbaz <alishahbaz7@gmail.com>
Date: Fri, 13 Aug 2021 15:04:20 +0530
Subject: [PATCH] added design elements to the slider

---
 components/ImageUploader.tsx | 19 ++++++++++---------
 components/Slider.tsx        |  8 ++++----
 2 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/components/ImageUploader.tsx b/components/ImageUploader.tsx
index d3a558eb..db99ef7e 100644
--- a/components/ImageUploader.tsx
+++ b/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>
                   }
diff --git a/components/Slider.tsx b/components/Slider.tsx
index 8d78b136..e3d61b0f 100644
--- a/components/Slider.tsx
+++ b/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" />