Add year slider to map page

[flibbertigibbet]

Overview

Let user modify the map layer year via a slider at the bottom of the map page. (The precipitation layer is the only layer with a date range currently).

Demo

Notes

@azavea/temperate-design this is an unstyled nouislider component; documentation on styling for nouislider is here and the default component styles are here.

Testing Instructions

• Go to the map page and select precipitation layer
• Date range slider should show with years for layer
• Scrubbing slider should update map layer
• Slider should not show for any other layer or no selected layer

• Is the CHANGELOG.md updated with any relevant additions, changes, fixes or removals following the format of keepachangelog?

Closes #1292.

[flibbertigibbet]

Created #1318 for the 'play' button.

[maurizi]

@azavea/temperate-design this is an unstyled nouislider component; documentation on styling for nouislider is here and the default component styles are here.

@alexelash is off for a few weeks, so I don't think we should block anything waiting for design, but I think this is pretty close to the wireframes, albeit keeping most of the default noUiSlider styling:

diff --git a/src/angular/planit/src/assets/sass/pages/_map.scss b/src/angular/planit/src/assets/sass/pages/_map.scss
index 0ff73b8a..57222cfa 100644
--- a/src/angular/planit/src/assets/sass/pages/_map.scss
+++ b/src/angular/planit/src/assets/sass/pages/_map.scss
@@ -49,4 +49,22 @@ app-map {
       }
     }
   }
+
+  .slider {
+    position: absolute;
+    bottom: 5rem;
+    left: 5rem;
+    right: 5rem;
+    background: $dark-grey-background;
+    padding: 10px 30px 40px 20px;
+    border-radius: 15px;
+    width: auto;
+
+    .noUi-pips {
+      color: $white;
+    }
+    .noUi-marker, .noUi-marker-large {
+      background: $neutral-2;
+    }
+  }
 }

[maurizi]

This looks good, nice and simple.

I left a few minor comments, and some interim CSS you can apply until @alexelash is available.

[flibbertigibbet]

Thanks for the styling. I thought it looked too large at full width, so I set the width to 40% instead.

This should be ready for another look.