From 031ea0adfd6465d114ba6405040b8a27b702f15b Mon Sep 17 00:00:00 2001
From: ben-chamberlain <ben.albrecht.chamberlain@gmail.com>
Date: Thu, 14 Mar 2024 10:14:07 +1300
Subject: [PATCH 1/2] default opacity 100;

---
 src/views/hazardMaps/HazardMapsControls.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/hazardMaps/HazardMapsControls.tsx b/src/views/hazardMaps/HazardMapsControls.tsx
index 7fd0b33..aa9e581 100644
--- a/src/views/hazardMaps/HazardMapsControls.tsx
+++ b/src/views/hazardMaps/HazardMapsControls.tsx
@@ -47,7 +47,7 @@ const HazardMapsControls: React.FC<HazardMapsControlsProps> = ({
   const [vs30, setVs30] = useState<number>(state.vs30);
   const [poe, setPoe] = useState<number>(state.poe);
   const [colorScale, setColorScale] = useState<string>("inferno");
-  const [gridOpacity, setGridOpacity] = useState<number>(50);
+  const [gridOpacity, setGridOpacity] = useState<number>(100);
   const [dataFetched, setDataFetched] = useState<boolean>(true);
   const [controlsChanged, setControlsChanged] = useState<number>(0);
 

From e7612d0ec065511125ed1d78f0e8b020fc6ab843 Mon Sep 17 00:00:00 2001
From: ben-chamberlain <ben.albrecht.chamberlain@gmail.com>
Date: Thu, 14 Mar 2024 10:18:18 +1300
Subject: [PATCH 2/2] change range to 1-10;

---
 src/components/common/SliderWithInput.tsx   | 14 ++++++++------
 src/views/hazardMaps/HazardMapsControls.tsx |  4 ++--
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/common/SliderWithInput.tsx b/src/components/common/SliderWithInput.tsx
index 7b302b2..9dde342 100644
--- a/src/components/common/SliderWithInput.tsx
+++ b/src/components/common/SliderWithInput.tsx
@@ -30,8 +30,8 @@ export const SliderWithInput: React.FC<SliderWithInputProps> = ({
   const handleBlur = () => {
     if (value < 0) {
       setValue(0);
-    } else if (value > 100) {
-      setValue(100);
+    } else if (value > 10) {
+      setValue(10);
     }
   };
 
@@ -46,9 +46,11 @@ export const SliderWithInput: React.FC<SliderWithInputProps> = ({
         <Grid item xs>
           <Slider
             value={typeof value === "number" ? value : 0}
-            step={10}
+            step={1}
             onChange={handleSliderChange}
             aria-labelledby="input-slider"
+            min={1}
+            max={10}
           />
         </Grid>
         <Grid item>
@@ -58,9 +60,9 @@ export const SliderWithInput: React.FC<SliderWithInputProps> = ({
             onChange={handleInputChange}
             onBlur={handleBlur}
             inputProps={{
-              step: 10,
-              min: 0,
-              max: 100,
+              step: 1,
+              min: 1,
+              max: 10,
               type: "number",
               "aria-labelledby": "input-slider",
             }}
diff --git a/src/views/hazardMaps/HazardMapsControls.tsx b/src/views/hazardMaps/HazardMapsControls.tsx
index aa9e581..286c005 100644
--- a/src/views/hazardMaps/HazardMapsControls.tsx
+++ b/src/views/hazardMaps/HazardMapsControls.tsx
@@ -47,7 +47,7 @@ const HazardMapsControls: React.FC<HazardMapsControlsProps> = ({
   const [vs30, setVs30] = useState<number>(state.vs30);
   const [poe, setPoe] = useState<number>(state.poe);
   const [colorScale, setColorScale] = useState<string>("inferno");
-  const [gridOpacity, setGridOpacity] = useState<number>(100);
+  const [gridOpacity, setGridOpacity] = useState<number>(10);
   const [dataFetched, setDataFetched] = useState<boolean>(true);
   const [controlsChanged, setControlsChanged] = useState<number>(0);
 
@@ -77,7 +77,7 @@ const HazardMapsControls: React.FC<HazardMapsControlsProps> = ({
         poe: poe,
         color_scale: colorScale,
         color_scale_vmax: MAP_GRID_VMAX,
-        fill_opacity: Number(gridOpacity / 100),
+        fill_opacity: Number(gridOpacity / 10),
         stroke_width: MAP_GRID_STROKE_WIDTH,
         stroke_opacity: 0.0,
       });