Replace angular sliders with styled, native input[type="range"] slide…

…rs to avoid angular slider bug (i.e. sometimes zero value) Ref : Slider incorrectly set to zero on app init (sometimes) #113
GeneMANIA · Jun 30, 2017 · b1d6675 · b1d6675
1 parent 12f2456
commit b1d6675
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 2 deletions.
diff --git a/website-ui/css/app.less b/website-ui/css/app.less
@@ -174,3 +174,107 @@ sup {
 .small {
   font-size: 0.8em;
 }
+
+input[type='range'] {
+  -webkit-appearance: none;
+  appearance: none;
+  min-width: 3em;
+  height: 1em;
+  background: transparent;
+  cursor: pointer;
+  outline: none !important;
+
+  &:focus {
+    outline: none !important;
+  }
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background-color: #000;
+    border-radius: 1em;
+    border-width: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.45em;
+    cursor: pointer;
+    outline: none;
+  }
+
+  &::-moz-range-thumb {
+    background-color: #000;
+    border-radius: 1em;
+    border-width: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: -0.45em;
+    cursor: pointer;
+    outline: none;
+  }
+
+  &::-ms-thumb {
+    background-color: #000;
+    border-radius: 1em;
+    border-width: 0;
+    width: 1em;
+    height: 1em;
+    margin-top: 0;
+    cursor: pointer;
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 0.1em;
+    background-color: #888;
+    border-radius: 0.1em;
+    outline: none;
+  }
+
+  &::-moz-range-track {
+    width: 100%;
+    height: 0.1em;
+    background-color: #888;
+    border-radius: 0.1em;
+    outline: none;
+  }
+
+  &::-ms-track {
+    background: transparent;
+    color: transparent;
+    width: 100%;
+    height: 0.1em;
+    background-color: #888;
+    border-radius: 0.1em;
+    outline: none;
+  }
+}
+
+input[type='range'].slider-dark-bg {
+  &::-webkit-slider-thumb {
+    background-color: #fff;
+  }
+
+  &::-moz-range-thumb {
+    background-color: #fff;
+  }
+
+  &::-ms-thumb {
+    background-color: #fff;
+  }
+
+  &::-webkit-slider-runnable-track {
+    background-color: #999;
+  }
+
+  &::-moz-range-track {
+    background-color: #999;
+  }
+
+  &::-ms-track {
+    background-color: #999;
+  }
+}
diff --git a/website-ui/templates/query.html b/website-ui/templates/query.html
@@ -189,12 +189,12 @@
         <div id="query-adv-opts" class="query-adv-opts scrollable" ng-show="query.editingAdvanced">
           <div class="query-adv-opt-name">Max resultant genes: {{query.maxGenes}}</div>
           <div class="query-slider-container">
-            <input class="query-slider" type="range" autocomplete="off" ng-model="query.maxGenes" min="0" max="100" ng-rangeslider ng-rangeslider-update-on="query.editingAdvanced" />
+            <input class="query-slider slider-dark-bg" type="range" autocomplete="off" ng-model="query.maxGenes" min="0" max="100" />
           </div>
 
           <div class="query-adv-opt-name">Max resultant attributes: {{query.maxAttrs}}</div>
           <div class="query-slider-container">
-            <input class="query-slider" type="range" autocomplete="off" ng-model="query.maxAttrs" min="0" max="100" ng-rangeslider ng-rangeslider-update-on="query.editingAdvanced" />
+            <input class="query-slider slider-dark-bg" type="range" autocomplete="off" ng-model="query.maxAttrs" min="0" max="100" />
           </div>
 
           <div class="query-adv-opt-name">Network weighting</div>