Merge pull request #451 from GNS-Science/feature/444_opacity_slider_d…

…efault_100 Feature/444 opacity slider default 100
GNS-Science · Mar 14, 2024 · 1155553 · 1155553
2 parents a1b3927 + e7612d0
commit 1155553
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git 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
@@ -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>(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,
       });