adding three sliders

justice40-frontend/src/components/map-slider.js

@@ -0,0 +1,26 @@
+import React, {useState} from 'react';
+
+function MapSlider(props){
+    const [value, setValue] = useState(0);
+    return (
+        <div className="slider-container">
+            <label 
+                className="usa-label" 
+                htmlFor="usa-range">
+                    {props.rangeName}
+            </label>
+            <input 
+                id="usa-range" 
+                className="usa-range" 
+                onChange={e => setValue(e.target.value)}
+                type="range" 
+                min="0" 
+                max="100" 
+                step="20" 
+                value="60" 
+            />
+        </div>
+    );
+};
+
+export default MapSlider;

justice40-frontend/src/pages/index.js

@@ -1,10 +1,14 @@
-import React from 'react';
+import React, {useState} from 'react';
 import Layout from '../components/layout';
 import SEO from '../components/seo';
 import OlMapWrapper from '../components/ol-map-wrapper';
+import MapSlider from '../components/map-slider';
 import * as styles from "./index.module.css";
 
-const IndexPage = () => {
+
+function IndexPage(props) {
+  const [heat, setHeat] = useState("");
+
   return (
     <Layout>
       <SEO title="Justice 40 Home" />
@@ -13,7 +17,11 @@ const IndexPage = () => {
           <div className="grid-col-8">
             <OlMapWrapper />
           </div>
-          <div className="grid-col-4"></div>
+          <div className="grid-col-4">
+            <MapSlider rangeName="Heat" />
+            <MapSlider rangeName="Poverty" />
+            <MapSlider rangeName="Environmental" />
+          </div>
         </div>
       </div>
     </Layout>