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 = ({ 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 = ({ @@ -58,9 +60,9 @@ export const SliderWithInput: React.FC = ({ 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 7fd0b33..286c005 100644 --- a/src/views/hazardMaps/HazardMapsControls.tsx +++ b/src/views/hazardMaps/HazardMapsControls.tsx @@ -47,7 +47,7 @@ const HazardMapsControls: React.FC = ({ const [vs30, setVs30] = useState(state.vs30); const [poe, setPoe] = useState(state.poe); const [colorScale, setColorScale] = useState("inferno"); - const [gridOpacity, setGridOpacity] = useState(50); + const [gridOpacity, setGridOpacity] = useState(10); const [dataFetched, setDataFetched] = useState(true); const [controlsChanged, setControlsChanged] = useState(0); @@ -77,7 +77,7 @@ const HazardMapsControls: React.FC = ({ 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, });