the slider works now.

modules/renderer/photos.js

@@ -14,7 +14,7 @@ export function rendererPhotos(context) {
     var _fromDate;
     var _toDate;
     var _maxPhotoDate;
-    var _yearSlider;
+    var _yearSliderValue;
     var _usernames;
 
     function photos() {}
@@ -52,8 +52,8 @@ export function rendererPhotos(context) {
         return _maxPhotoDate;
     };
 
-    photos.yearSlider = function() {
-        return _yearSlider;
+    photos.yearSliderValue = function() {
+        return _yearSliderValue;
     };
 
     photos.dateFilterValue = function(val) {
@@ -110,7 +110,7 @@ export function rendererPhotos(context) {
         if (currYear){
             var fromDate = new Date(currYear, 0, 1);
             photos.setDateFilter('fromDate', fromDate, updateUrl);
-            _yearSlider = currYear;
+            _yearSliderValue = currYear;
         } else {
             photos.setDateFilter('fromDate', null, updateUrl);
         }

modules/services/panoramax.js

@@ -285,9 +285,7 @@ export default {
     },
 
     getOldestDate: function(){
-        if (_oldestDate){
-            return _oldestDate.substr(0, 4);
-        }
+        return _oldestDate;
     },
 
     // Get visible sequences

modules/svg/panoramax_images.js

@@ -186,38 +186,49 @@ export function svgPanoramaxImages(projection, context, dispatch) {
         if (service) service.setStyles(context, null);
     }
 
-    function updateYearSlider(oldestDate){
+    function updateYearSlider(minYear){
         let maxYear = new Date();
         maxYear = maxYear.getFullYear();
         let slider = d3_select('.list-option-date-slider');
 
-        let sliderWrap = slider.select(function() { return this.parentNode; });
+        if (slider && minYear){
+            let sliderWrap = slider.select(function() { return this.parentNode; });
+            let sliderLabel = sliderWrap.select('.year-selected');
 
-        sliderWrap.selectAll('datalist').remove();
+            sliderWrap.selectAll('datalist').remove();
 
-        let datalist = sliderWrap.append('datalist')
-            .attr('id', 'dateValues')
-            .attr('class', 'year-datalist');
+            let datalist = sliderWrap.append('datalist')
+                .attr('id', 'dateValues')
+                .attr('class', 'year-datalist');
 
-        if (oldestDate < maxOldestYear) oldestDate = maxOldestYear;
+            minYear = parseInt(minYear, 10);
 
-        if(slider.attr('value')){
-            let currYear = parseInt(slider.attr('value'), 10);
-            currYear = oldestDate + (maxYear - currYear);
-            slider.attr('value', currYear)
+            if (minYear < maxOldestYear) minYear = maxOldestYear;
+
+            let currYear = sliderLabel.html();
+            currYear = currYear.substring(0, 4);
+            currYear = parseInt(currYear, 10);
+
+            let sliderValue = maxYear - (currYear - minYear);
+
+            if (minYear > currYear){
+                sliderValue = maxYear;
+                sliderLabel.html(minYear + ' - ' + maxYear);
+            }
+
+            slider.attr('value', sliderValue);
+            slider.attr('min', minYear);
+
+            datalist
+                .append('option')
+                .attr('value', minYear)
+                .attr('label', minYear);
+
+            datalist
+                .append('option')
+                .attr('value', maxYear)
+                .attr('label', maxYear);
         }
-
-        slider.attr('min', oldestDate);
-
-        datalist
-            .append('option')
-            .attr('value', oldestDate)
-            .attr('label', oldestDate);
-
-        datalist
-            .append('option')
-            .attr('value', maxYear)
-            .attr('label', maxYear);
     }
 
     async function update() {
@@ -227,13 +238,12 @@ export function svgPanoramaxImages(projection, context, dispatch) {
         const service = getService();
         let sequences = (service ? service.sequences(projection, zoom) : []);
         let images = (service ? service.images(projection) : []);
-        let oldestDate = service.getOldestDate();
-
-        updateYearSlider(oldestDate);
 
         images = await filterImages(images);
         sequences = await filterSequences(sequences, service);
 
+        let oldestDate = (service ? service.getOldestDate() : null);
+
         let traces = layer.selectAll('.sequences').selectAll('.sequence')
             .data(sequences, function(d) { return d.id; });
 
@@ -297,6 +307,8 @@ export function svgPanoramaxImages(projection, context, dispatch) {
             .attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
             .attr('d', viewfieldPath);
 
+        if (oldestDate) updateYearSlider(oldestDate.substring(0, 4));
+
         function viewfieldPath() {
             if (this.parentNode.__data__.isPano) {
                 return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';

modules/ui/sections/photo_overlays.js

@@ -341,16 +341,16 @@ export function uiSectionPhotoOverlays(context) {
     function drawDateSlider(selection){
 
         function filterEnabled() {
-            return context.photos().yearSlider();
+            return context.photos().yearSliderValue();
         }
 
         var maxYear = new Date();
         maxYear = parseInt(maxYear.getFullYear(), 10);
 
-        let yearSlider = context.photos().yearSlider();
+        let yearSliderValue = context.photos().yearSliderValue();
         let currYear;
 
-        if (yearSlider) currYear = yearSlider;
+        if (yearSliderValue) currYear = yearSliderValue;
         else currYear = maxYear;
 
         var ul = selection
@@ -402,7 +402,6 @@ export function uiSectionPhotoOverlays(context) {
             .append('input')
             .attr('type', 'range')
             .attr('max', maxYear)
-            .attr('value', currYear)
             .attr('list', 'dateValues')
             .attr('class', 'list-option-date-slider')
             .call(utilNoAuto)