Explore filtering and styling

Update to ArcGIS JS API 4.15.

Still not working:

- Filter: Not clear on how to do a view call.
- Added min thumb: event listener conflicts with the extra thumb. Not seeing an ID I can use...maybe I can listen to just the events for a specific thumb?
- Changed the lastHighligh variable to var from const (console error; promise)

sharedAir.css

@@ -74,3 +74,21 @@ body {
     width: 300px;
     background-color: rgba(255,255,255,0.8)
 }
+
+#infoDiv {
+    padding: 10px;
+    width: 275px;
+    height: 50vh;
+}
+
+.esri-slider__max, .esri-slider__min {
+    font-weight: 700;
+}
+
+.esri-slider--vertical .esri-slider__max {
+    margin-bottom: 1em !important;
+}
+
+.esri-slider--vertical .esri-slider__min{
+    margin-top: 1em !important;
+}

sharedAir.html

@@ -5,9 +5,9 @@
   <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
   <title>SharedAir</title>
   <link rel="stylesheet" href="sharedAir.css">
-  <link rel="stylesheet" href="https://js.arcgis.com/4.14/esri/themes/light/main.css" />
+  <link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/themes/light/main.css" />
 
-  <script src="https://js.arcgis.com/4.14/"></script>
+  <script src="https://js.arcgis.com/4.15/"></script>
 
   <script src="sharedAir.js"></script>
 </head>
@@ -24,7 +24,13 @@
   <div id="mainViewDiv"></div>
   <div id="akViewDiv" class="esri-widget"></div>
   <div id="hiViewDiv" class="esri-widget"></div>
-  <div id="sliderDiv" class"esri-widget"></div>
+  <div id="infoDiv" class="esri-widget">
+    <div id="infoDescription">
+      Show where the % that believe the global warming is happening is at most:
+      <span id="sliderValue">100</span>%.
+    </div>
+    <div id="sliderDiv" class"slider"></div>
+  </div>
 </div>
 </div>
 </body>

sharedAir.js

@@ -217,7 +217,7 @@ require([
                     view.on("pointer-move", function(event) {
                         // console.log("Highlight");
                         view.hitTest(event).then(function(response) {
-                            const lastHighlight = highlight;
+                            var lastHighlight = highlight;
 
                             // if a feature is returned, highlight it
                             // and display its attributes in the popup
@@ -311,20 +311,48 @@ require([
             }
 
             // add slider widget
-            // Joe is adding a comment for some reason...
-            const slider = new Slider({
-              container: document.getElementById("sliderDiv"),
-              min: 0,
-              max: 100,
-              values: [ 50 ],
-              rangeLabelsVisible: true,
-              precision: 0,
-              layout: "vertical"
-            });
 
-            mainView.ui.add(slider, {
-              position: "top-right",
-            });
+            // view.whenLayerView(layer).then(function(layerView) {
+
+              const filterField = "happening";
+
+              const slider = new Slider({
+                container: document.getElementById("sliderDiv"),
+                min: 0,
+                max: 100,
+                steps: 5,
+                values: [ 100, 0 ],
+                visibleElements: {
+                  // labels: true,
+                  rangeLabels: true
+                },
+                // labelsVisible: true, // deprecated in 4.15
+                // rangeLabelsVisible: true, // deprecated in 4.15
+                precision: 0,
+                layout: "vertical"
+              });
+
+              mainView.ui.add("infoDiv", {
+                position: "top-right",
+              });
+
+              slider.tickConfigs = [{
+                  mode: "percent",
+                  values: 20,
+                  labelsVisible: true,
+                }];
+
+              const sliderValue = document.getElementById("sliderValue");
+
+              // filter features by belief happening
+
+              slider.on(["thumb-change", "thumb-drag"], function(event) {
+                sliderValue.innerText = event.value;
+                layerView.filter = {
+                  where: filterField + " <= " + event.value
+                };
+              });
+            // });
 
 
             console.log("complete")