now keeps play on slider change

src/leaflet-player-control.js

@@ -201,8 +201,14 @@ var L;
                         return moment(num, "X").utc().format("YYYY-MM-DD, HH:mm");
                     },
                     onChange: function (data) {
+                        var play = self.player.isPlaying();
+                        var steps = self.player.getSteps();
+                        if (play)
+                            stopPlay();
                         var date = moment(data.from * 1000).utc();
                         self.timeSelect.value = date.format("X");
+                        if (play)
+                            startPlay(steps);
                     },
                     onFinish: function (data) {
                         self.disable();
@@ -276,15 +282,27 @@ var L;
                         self.timeDimension.off('timeload', playUpdate);
                     }
                 };
+                var startPlay = function (steps) {
+                    (steps > 0) ? startPlayForward() : startPlayBackward();
+                };
+                var startPlayForward = function () {
+                    self.playForwardIcon.classList.remove('uk-icon-play');
+                    self.playForwardIcon.classList.add('uk-icon-pause');
+                    self.player.start(1);
+                    self.timeDimension.on('timeload', playUpdate);
+                };
+                var startPlayBackward = function () {
+                    self.playBackwardIcon.classList.remove('uk-icon-play');
+                    self.playBackwardIcon.classList.add('uk-icon-pause');
+                    self.player.start(-1);
+                    self.timeDimension.on('timeload', playUpdate);
+                };
                 playForwardButton.onclick = function () {
                     if (self.player.isPlaying()) {
                         stopPlay();
                     }
                     else {
-                        self.playForwardIcon.classList.remove('uk-icon-play');
-                        self.playForwardIcon.classList.add('uk-icon-pause');
-                        self.player.start(1);
-                        self.timeDimension.on('timeload', playUpdate);
+                        startPlayForward();
                     }
                 };
                 playBackwardButton.onclick = function () {
@@ -292,10 +310,7 @@ var L;
                         stopPlay();
                     }
                     else {
-                        self.playBackwardIcon.classList.remove('uk-icon-play');
-                        self.playBackwardIcon.classList.add('uk-icon-pause');
-                        self.player.start(-1);
-                        self.timeDimension.on('timeload', playUpdate);
+                        startPlayBackward();
                     }
                 };
                 stepStart.onclick = function () {

src/leaflet-player-control.ts

@@ -224,8 +224,12 @@ export class Player extends L.Control {
                 return moment(num, "X").utc().format("YYYY-MM-DD, HH:mm");
             },
             onChange: function (data) {
+                var play = self.player.isPlaying();
+                var steps = self.player.getSteps();
+                if (play) stopPlay();
                 var date = moment(data.from*1000).utc();
                 self.timeSelect.value = date.format("X");
+                if (play) startPlay(steps);
             },  
             onFinish: function (data) {
                 self.disable();
@@ -303,25 +307,37 @@ export class Player extends L.Control {
                 self.timeDimension.off('timeload', playUpdate);
             }                 
         };
+
+        var startPlay = function(steps) {
+            (steps > 0)? startPlayForward():startPlayBackward();            
+        }
+
+        var startPlayForward = function() {
+            self.playForwardIcon.classList.remove('uk-icon-play');                    
+            self.playForwardIcon.classList.add('uk-icon-pause');  
+            self.player.start(1);
+            self.timeDimension.on('timeload', playUpdate);        
+        }
+
+        var startPlayBackward = function() {
+            self.playBackwardIcon.classList.remove('uk-icon-play');                    
+            self.playBackwardIcon.classList.add('uk-icon-pause');  
+            self.player.start(-1);
+            self.timeDimension.on('timeload', playUpdate);        
+        }
         
         playForwardButton.onclick = function(){
           if (self.player.isPlaying()) {
                 stopPlay();       
             } else {
-                self.playForwardIcon.classList.remove('uk-icon-play');                    
-                self.playForwardIcon.classList.add('uk-icon-pause');  
-                self.player.start(1);
-                self.timeDimension.on('timeload', playUpdate);        
+                startPlayForward();
             }            
         };    
         playBackwardButton.onclick = function(){
           if (self.player.isPlaying()) {
                 stopPlay();              
             } else {
-                self.playBackwardIcon.classList.remove('uk-icon-play');                    
-                self.playBackwardIcon.classList.add('uk-icon-pause');  
-                self.player.start(-1);
-                self.timeDimension.on('timeload', playUpdate);        
+                startPlayBackward();
             }            
         };