diff --git a/rowers/templates/instroke_interactive.html b/rowers/templates/instroke_interactive.html
index 31290ff5..ccb5fedc 100644
--- a/rowers/templates/instroke_interactive.html
+++ b/rowers/templates/instroke_interactive.html
@@ -8,6 +8,13 @@
 <script type='text/javascript'
         src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'>
 </script>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>jQuery UI Slider - Range slider</title>
+  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
+  <link rel="stylesheet" href="/resources/demos/style.css">
+  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
+  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
+
 <script>
   function submit_form() {
     console.log("form changed");
@@ -47,6 +54,23 @@
     });
   });
 </script>
+<script>
+$( function() {
+  $( "#slider-range" ).slider({
+    range: true,
+    min: 0,
+    max: 60,
+    values: [ 15, 45 ],
+    slide: function( event, ui ) {
+      $( "#id_spm_min" ).val( ui.values[ 0 ]);
+      $( "#id_spm_max" ).val(ui.values[ 1 ] );
+      console.log(event);
+    }
+
+  });
+
+} );
+</script>
 {% endblock %}
 
 {% block main %}
@@ -74,6 +98,7 @@
     <table>
       {{ form.as_table }}
     </table>
+    <hr id="slider-range" />
     <input name='form' class="button" type="submit" value="Submit">
     </form>
   </li>