Add the scroll wheel on the trainer search page

views/trainer/templates/trainer/search.html

@@ -78,6 +78,13 @@
                 background-position: center;
                 background-repeat: no-repeat;
             }
+            #zoom_slider {
+                position: fixed;
+                width: 200px;
+                max-width:100%;
+                bottom: 5px;
+                right: 15px;
+            }
         </style>
         
         <script type="text/javascript">
@@ -391,6 +398,7 @@
                     </div>
                 {% endfor %}
             </div>
+            <div id="zoom_slider"></div>
         </div>
         
         <script type="text/javascript">
@@ -408,6 +416,23 @@
                     .html( marks[ "{{ mark[ 'uuid' ] }}" ][ "dt" ].join( "<br>" ) );
             {% endfor %}
 
+            var onMove = function( e, percentage )
+            {
+                zoom_level = 100 +  5 * percentage;
+                updateZoom();
+            }
+            var updateZoom = function()
+            {
+                document.documentElement.style.setProperty( "--imgsize", zoom_level + "px" );
+            }
+            var zoomslider = new RangeSlider( $( "#zoom_slider" ), {
+                fgColour: "#647180",
+                percentage: 40,
+                onMove: onMove,
+                onDown: onMove,
+                pollLimit: 50
+            } );
+            
             $( "#filter_search" ).on( "keyup", update_filter_search );
             $( "#filter_search" ).focus();