Basic slider rendered

Just renders the slider, in a vertical orientation.

Events not included yet.

Slider documentation:
https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Slider.html

Example of filtering a feature layer with a slider:
https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=featurereduction-cluster-filter-slider

sharedAir.css

@@ -50,6 +50,7 @@ body {
     height: 100%;
     width: 100%;
 }
+
 #akViewDiv {
     padding: 0;
     margin: 0;
@@ -64,4 +65,12 @@ body {
     height: 135px;
     width: 200px;
     background-color: rgba(255,255,255,0.8)
-}
\ No newline at end of file
+}
+
+#legend {
+    padding: 0;
+    margin: 0;
+    height: 300px;
+    width: 300px;
+    background-color: rgba(255,255,255,0.8)
+}

sharedAir.html

@@ -24,7 +24,8 @@
   <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>
 </div>
 </body>
-</html>
\ No newline at end of file
+</html>

sharedAir.js

@@ -5,6 +5,7 @@ require([
     "esri/Map",
     "esri/views/MapView",
     "esri/layers/FeatureLayer",
+    "esri/widgets/Slider",
     "dojo/dom-style",
     "dojo/dom-attr",
     "dojo/on",
@@ -16,6 +17,7 @@ require([
     Map,
     MapView,
     FeatureLayer,
+    Slider,
     domStyle,
     domAttr,
     on,
@@ -308,6 +310,21 @@ require([
                 return view;
             }
 
+            // add slider widget
+            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",
+            });
+
 
             console.log("complete")