diff --git a/appengine/maze/src/html.js b/appengine/maze/src/html.js
index 5fa76b2d5..1b6d33949 100644
--- a/appengine/maze/src/html.js
+++ b/appengine/maze/src/html.js
@@ -44,6 +44,31 @@ ${BlocklyGames.html.headerBar(ij, BlocklyGames.getMsg('Games.maze', true),
 <table width=400>
   <tr>
     <td style="width: 190px; text-align: center; vertical-align: top;">
+      <svg
+          id="slider"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:svg="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+          version="1.1"
+          width=150
+          height=50>
+        <!-- Slow icon. -->
+        <clipPath id="slowClipPath">
+          <rect width=26 height=12 x=5 y=14 />
+        </clipPath>
+        <image xlink:href="common/icons.png" height=63 width=84 x=-21 y=-10
+            clip-path="url(#slowClipPath)" />
+        <!-- Fast icon. -->
+        <clipPath id="fastClipPath">
+          <rect width=26 height=16 x=120 y=10 />
+        </clipPath>
+        <image xlink:href="common/icons.png" height=63 width=84 x=120 y=-11
+            clip-path="url(#fastClipPath)" />
+      </svg>
+    </td>
+    <td style="width: 15px;">
+      <img id="spinner" style="visibility: hidden;" src="common/loading.gif" loading="lazy" height=15 width=15>
+    </td>
     <td>
       <button id="runButton" class="primary" title="${BlocklyGames.getMsg('Maze.runTooltip', true)}">
         <img src="common/1x1.gif" class="run icon21"> ${BlocklyGames.getMsg('Games.runProgram', true)}
diff --git a/appengine/maze/src/main.js b/appengine/maze/src/main.js
index 5bf65026a..066780c84 100644
--- a/appengine/maze/src/main.js
+++ b/appengine/maze/src/main.js
@@ -26,6 +26,7 @@ goog.require('BlocklyCode');
 goog.require('BlocklyDialogs');
 goog.require('BlocklyGames');
 goog.require('BlocklyInterface');
+goog.require('Slider');
 goog.require('Maze.Blocks');
 goog.require('Maze.html');
 
@@ -278,6 +279,16 @@ const tile_SHAPES = {
 /**
  * Milliseconds between each animation frame.
  */
+
+/**
+ * Number of milliseconds that execution should delay.
+ * @type number
+ */
+let pause = 0;
+
+//define speedSlider var for keep speedSlider value
+let speedSlider;
+
 let stepSpeed;
 
 let start_;
@@ -427,6 +438,10 @@ function init() {
 
   BlocklyInterface.init(BlocklyGames.getMsg('Games.maze', false));
 
+  // Initialize the slider.
+  const sliderSvg = BlocklyGames.getElementById('slider');
+  speedSlider = new Slider(10, 35, 130, sliderSvg);
+
   // Setup the Pegman menu.
   const pegmanImg = document.querySelector('#pegmanButton>img');
   pegmanImg.style.backgroundImage = 'url(' + SKIN.sprite + ')';
@@ -1114,6 +1129,10 @@ function animate() {
       setTimeout(BlocklyCode.congratulations, 1000);
   }
 
+  // Scale the speed non-linearly, to give better precision at the fast end.
+  const stepSpeed = 1000 * Math.pow(1 - speedSlider.getValue(), 2);
+  pause = Math.max(1, stepSpeed);
+
   pidList.push(setTimeout(animate, stepSpeed * 5));
 }
 
diff --git a/appengine/maze/style.css b/appengine/maze/style.css
index 350db2885..643277424 100644
--- a/appengine/maze/style.css
+++ b/appengine/maze/style.css
@@ -127,3 +127,18 @@ html[dir="RTL"] #pegmanButton>span {
   width: 49px;
   background-position: -980px 0;
 }
+/* Slider. */
+.sliderTrack {
+  stroke: #aaa;
+  stroke-width: 6px;
+  stroke-linecap: round;
+}
+.sliderKnob {
+  fill: #ddd;
+  stroke: #bbc;
+  stroke-width: 1px;
+  stroke-linejoin: round;
+}
+.sliderKnob:hover {
+  fill: #eee;
+}
\ No newline at end of file