Update HTML animation as slider is dragged

timhoffm · timhoffm · commit 1c98739e7700 · 2018-10-03T19:21:19.000+02:00
diff --git a/lib/matplotlib/_animation_data.py b/lib/matplotlib/_animation_data.py
@@ -4,6 +4,12 @@
 href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/
 css/font-awesome.min.css">
 <script language="javascript">
+  function isInternetExplorer() {
+    ua = navigator.userAgent;
+    /* MSIE used to detect old browsers and Trident used to newer ones*/
+    return ua.indexOf("MSIE ") > -1 || ua.indexOf("Trident/") > -1;
+  }
+
   /* Define the Animation class */
   function Animation(frames, img_id, slider_id, interval, loop_select_id){
     this.img_id = img_id;
@@ -20,7 +26,15 @@
      this.frames[i] = new Image();
      this.frames[i].src = frames[i];
     }
-    document.getElementById(this.slider_id).max = this.frames.length - 1;
+    var slider = document.getElementById(this.slider_id);
+    slider.max = this.frames.length - 1;
+    if (isInternetExplorer()) {
+        // switch from oninput to onchange because IE <= 11 does not conform
+        // with W3C specification. It ignores oninput and onchange behaves
+        // like oninput. In contrast, Mircosoft Edge behaves correctly.
+        slider.setAttribute('onchange', slider.getAttribute('oninput'));
+        slider.setAttribute('oninput', null);
+    }
     this.set_frame(this.current_frame);
   }
 
@@ -183,7 +197,7 @@
   <div class="anim-controls">
     <input id="_anim_slider{id}" type="range" class="anim-slider"
            name="points" min="0" max="1" step="1" value="0"
-           onchange="anim{id}.set_frame(parseInt(this.value));"></input>
+           oninput="anim{id}.set_frame(parseInt(this.value));"></input>
     <div class="anim-buttons">
       <button onclick="anim{id}.slower()"><i class="fa fa-minus"></i></button>
       <button onclick="anim{id}.first_frame()"><i class="fa fa-fast-backward">
