Make imageSlider range input use reactive variables instead of updating it manually. Add min/max zoom levels, remove unnecessary precision for Zoom

Packages/viewerbase/client/components/viewer/imageControls/imageControls.html

@@ -1,7 +1,11 @@
 <template name="imageControls">
     <div class="imageControls">
         <div id="scrollbar">
-            <input id="imageSlider" type="range" min="1" val="1"/>
+            <input id="imageSlider"
+            	   type="range"
+            	   min="1"
+            	   value="{{imageIndex}}"
+            	   max="{{numImages}}"/>
         </div>
     </div>
 </template>

Packages/viewerbase/client/components/viewer/imageControls/imageControls.js

@@ -1,6 +1,20 @@
 const slideTimeoutTime = 40;
 let slideTimeout;
 
+Template.imageControls.onRendered(() => {
+    const instance = Template.instance();
+
+    Meteor.defer(() => {
+        // Set the current imageSlider width to its parent's height
+        // (because webkit is stupid and can't style vertical sliders)
+        const $slider = instance.$('#imageSlider');
+        const $element = $slider.parents().eq(2).siblings('.imageViewerViewport');
+        const viewportHeight = $element.height();
+
+        $slider.width(viewportHeight - 20);
+    });
+})
+
 Template.imageControls.events({
     'input #imageSlider, change #imageSlider': function(e) {
         // Note that we throttle requests to prevent the

Packages/viewerbase/client/components/viewer/imageControls/imageControls.styl

@@ -17,6 +17,7 @@ $imageSliderCursor = grab
   padding: 5px
 
   #scrollbar
+    height: calc(100% - 20px);
     margin-top: 5px
     width: 31px