Fixing scrollbar thumb width on IE11

Packages/ohif-viewerbase/client/components/viewer/cineDialog/cineDialog.styl

@@ -28,7 +28,7 @@
 
     &:active, &.active
       theme('color', '$activeColor')
-      
+
     &[disabled]
       &:hover
         color: inherit
@@ -37,13 +37,16 @@
 
   .cine-navigation, .cine-controls, .cine-options
     cursor: default
-    
+
   .fps-section
     input[type="range"]
       background-color: transparent
       border: 0 none
       outline: 0 none
 
+      &::-ms-tooltip
+        display: none
+
   .double-row-style
     box-sizing: border-box
     width: 300px

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

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

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

@@ -1,5 +1,6 @@
 import { Template } from 'meteor/templating';
 import { $ } from 'meteor/jquery';
+import { OHIF } from 'meteor/ohif:core';
 import { setActiveViewport } from '../../../lib/setActiveViewport';
 import { switchToImageByIndex } from '../../../lib/switchToImageByIndex';
 
@@ -11,12 +12,12 @@ Template.imageControls.onRendered(() => {
 
     // 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 $slider = instance.$('.imageSlider');
     const $element = $slider.parents().eq(2).siblings('.imageViewerViewport');
     const viewportHeight = $element.height();
 
     $slider.width(viewportHeight - 20);
-})
+});
 
 Template.imageControls.events({
     'keydown input[type=range]'(event) {
@@ -37,6 +38,7 @@ Template.imageControls.events({
             event.preventDefault();
         }
     },
+
     'input input[type=range], change input[type=range]'(event) {
         // Note that we throttle requests to prevent the
         // user's ultrafast scrolling from firing requests too quickly.
@@ -44,13 +46,13 @@ Template.imageControls.events({
         slideTimeout = setTimeout(() => {
             // Using the slider in an inactive viewport
             // should cause that viewport to become active
-            const slider = $(event.currentTarget);
-            const newActiveElement = slider.parents('.viewportContainer').find('.imageViewerViewport');
+            const $slider = $(event.currentTarget);
+            const newActiveElement = $slider.parents('.viewportContainer').find('.imageViewerViewport');
             setActiveViewport(newActiveElement);
 
             // Subtract 1 here since the slider goes from 1 to N images
             // But the stack indexing starts at 0
-            const newImageIdIndex = parseInt(slider.val(), 10) - 1;
+            const newImageIdIndex = parseInt($slider.val(), 10) - 1;
             switchToImageByIndex(newImageIdIndex);
         }, slideTimeoutTime);
 

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

@@ -7,7 +7,6 @@ $imageSliderBorder = none
 // Note that these are backwards due to the magic needed to make a cross-browser vertical slider
 $imageSliderWidth = 12px
 $imageSliderHeight = 39px
-$imageSliderCursor = grab
 
 .imageControls
   position: absolute
@@ -16,12 +15,12 @@ $imageSliderCursor = grab
   height: 100%
   padding: 5px
 
-  #scrollbar
+  .scrollbar
     height: calc(100% - 20px);
     margin-top: 5px
     width: 31px
 
-    #imageSlider
+    .imageSlider
       position: absolute
       left: 20px
 
@@ -57,7 +56,7 @@ $imageSliderCursor = grab
 
       &::-ms-track
         width: 100%
-        height: 2px
+        height: $imageSliderWidth
         border: none
         cursor: pointer
         animate: 0.2s
@@ -80,11 +79,12 @@ $imageSliderCursor = grab
         border: $imageSliderBorder
         height: $imageSliderWidth
         width: $imageSliderHeight
-        cursor: $imageSliderCursor
+        cursor: -webkit-grab
         margin-top: -7px
 
         &:active
           theme('background-color', '$activeColor')
+          cursor: -webkit-grabbing
 
       &::-moz-range-thumb
         theme('background-color', '$imageSliderColor')
@@ -92,11 +92,12 @@ $imageSliderCursor = grab
         border: $imageSliderBorder
         height: $imageSliderWidth
         width: $imageSliderHeight
-        cursor: $imageSliderCursor
+        cursor: -moz-grab
         z-index: 7
 
         &:active
           theme('background-color', '$activeColor')
+          cursor: -moz-grabbing
 
       &::-ms-thumb
         theme('background-color', '$imageSliderColor')
@@ -104,12 +105,15 @@ $imageSliderCursor = grab
         border: $imageSliderBorder
         height: $imageSliderWidth
         width: $imageSliderHeight
-        cursor: $imageSliderCursor
+        cursor: ns-resize
 
         &:active
           theme('background-color', '$activeColor')
 
+      &::-ms-tooltip
+        display: none
+
 // Set left position in IE, border-width attribute breaks left position of imageSlider
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
-  #imageSlider
-    left: 50px
+  .imageSlider
+    left: 50px