Init slider as disabled and not invisible

ivmartel · Jan 8, 2025 · b1ab757 · b1ab757
1 parent 3cd8c61
commit b1ab757
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/tests/pacs/viewer.html b/tests/pacs/viewer.html
@@ -129,6 +129,9 @@
   margin-top: 0px;
   border: 0;
 }
+input.vertical-slider[type=range]:disabled::-webkit-slider-thumb {
+  background: lightgray;
+}
 input.vertical-slider[type=range]:focus::-webkit-slider-runnable-track {
   background: lightgray;
 }
@@ -145,6 +148,9 @@
   cursor: pointer;
   border: 0;
 }
+input.vertical-slider[type=range]:disabled::-moz-range-thumb {
+  background: lightgray;
+}
 
 canvas {
   /* avoid parent auto-resize */

diff --git a/tests/pacs/viewer.js b/tests/pacs/viewer.js
@@ -473,11 +473,12 @@ function onDOMContentLoaded() {
  */
 function getSlider(layerGroupDivId) {
   const range = document.createElement('input');
-  range.style.display = 'none';
-  range.className = 'vertical-slider';
   range.type = 'range';
-  range.min = 0;
+  range.className = 'vertical-slider';
   range.id = layerGroupDivId + '-slider';
+  range.min = 0;
+  range.max = 0;
+  range.disabled = true;
   // update app on slider change
   range.oninput = function () {
     const lg = _app.getLayerGroupByDivId(layerGroupDivId);
@@ -501,9 +502,9 @@ function initSliders() {
       const ph = lg.getPositionHelper();
       const maxIndex = ph.getMaximumScrollIndex();
       if (maxIndex !== 0) {
+        slider.disabled = false;
         slider.max = maxIndex;
         slider.value = ph.getCurrentPositionScrollIndex();
-        slider.style.display = '';
       }
     }
   }