From ac2ab4e72f0ee14b7b590e9c550c712cb1e1cdb9 Mon Sep 17 00:00:00 2001
From: TripZz <nico.greiner9@gmail.com>
Date: Mon, 26 Feb 2024 09:29:53 +0100
Subject: [PATCH] NN-473 Update single slider to duo slider

---
 frontend/package-lock.json                    |   6 +
 frontend/package.json                         |   1 +
 .../toolbar/modules/SelectionList.vue         | 276 ++++++++++++------
 frontend/src/slider.css                       | 276 ++++++++++++++++++
 4 files changed, 463 insertions(+), 96 deletions(-)
 create mode 100644 frontend/src/slider.css

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 268ff517..cc44b258 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,6 +19,7 @@
         "jquery": "^3.6.3",
         "mitt": "^3.0.0",
         "ml-hclust": "^3.1.0",
+        "nouislider": "^15.7.1",
         "random-color-rgb": "^1.1.1",
         "sigma": "^1.2.2",
         "smallest-enclosing-circle": "^1.0.2",
@@ -8527,6 +8528,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/nouislider": {
+      "version": "15.7.1",
+      "resolved": "https://registry.npmjs.org/nouislider/-/nouislider-15.7.1.tgz",
+      "integrity": "sha512-5N7C1ru/i8y3dg9+Z6ilj6+m1EfabvOoaRa7ztpxBSKKRZso4vA52DGSbBJjw5XLtFr/LZ9SgGAXqyVtlVHO5w=="
+    },
     "node_modules/npm-run-path": {
       "version": "2.0.2",
       "resolved": "https://registry.npmmirror.com/npm-run-path/-/npm-run-path-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 3547aca8..c5251206 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -19,6 +19,7 @@
     "jquery": "^3.6.3",
     "mitt": "^3.0.0",
     "ml-hclust": "^3.1.0",
+    "nouislider": "^15.7.1",
     "random-color-rgb": "^1.1.1",
     "sigma": "^1.2.2",
     "smallest-enclosing-circle": "^1.0.2",
diff --git a/frontend/src/components/toolbar/modules/SelectionList.vue b/frontend/src/components/toolbar/modules/SelectionList.vue
index c29f11e7..d20b502d 100644
--- a/frontend/src/components/toolbar/modules/SelectionList.vue
+++ b/frontend/src/components/toolbar/modules/SelectionList.vue
@@ -4,38 +4,40 @@
             <div class="selection_list">
                 <div class="window-label">degree value</div>
                 <div class="menu-items">
+                    <div id="degree"></div>
                     <input
-                        id="degree"
-                        type="range"
+                        type="number"
                         v-bind:min="degree_boundary.min" v-bind:max="degree_boundary.max" v-bind:step="degree_boundary.step"
-                        v-model="degree_boundary.value"
+                        v-model="degree_boundary.minValue"
                         v-on:change="searchSubset()"
-                        v-on:input="valueChanged('degree')"
+                        v-on:input="valueChanged('degree', [degree_boundary.minValue,degree_boundary.maxValue])"
                     />
+                    <span class="seperator">-</span>
                     <input
                         type="number"
                         v-bind:min="degree_boundary.min" v-bind:max="degree_boundary.max" v-bind:step="degree_boundary.step"
-                        v-model="degree_boundary.value"
+                        v-model="degree_boundary.maxValue"
                         v-on:change="searchSubset()"
-                        v-on:input="valueChanged('degree')"
+                        v-on:input="valueChanged('degree', [degree_boundary.minValue,degree_boundary.maxValue])"
                     />
                 </div>
                 <div class="window-label">betweenness centrality value</div>
                 <div class="menu-items">
+                    <div id="betweenes"></div>
                     <input
-                        id="bcentrality"
-                        type="range"
+                        type="number"
                         v-bind:min="bc_boundary.min" v-bind:max="bc_boundary.max" v-bind:step="bc_boundary.step"
-                        v-model="bc_boundary.value"
+                        v-model="bc_boundary.minValue"
                         v-on:change="searchSubset()"
-                        v-on:input="valueChanged('bcentrality')"
+                        v-on:input="valueChanged('betweenes',[bc_boundary.minValue, bc_boundary.maxValue])"
                     />
+                    <span class="seperator">-</span>
                     <input
                         type="number"
                         v-bind:min="bc_boundary.min" v-bind:max="bc_boundary.max" v-bind:step="bc_boundary.step"
-                        v-model="bc_boundary.value"
+                        v-model="bc_boundary.maxValue"
                         v-on:change="searchSubset()"
-                        v-on:input="valueChanged('bcentrality')"
+                        v-on:input="valueChanged('betweenes',[bc_boundary.minValue, bc_boundary.maxValue])"
                     />
                 </div>
                 <div v-if="mode=='term'">
@@ -49,31 +51,32 @@
                             v-on:change="searchSubset()"
                             v-on:input="valueChanged('padj')"
                         />
-                        <input 
+                        <!-- <input 
                             type="number"
                             v-bind:min="padj_boundary.min" v-bind:max="padj_boundary.max" v-bind:step="padj_boundary.step"
                             v-model="padj_boundary.value"
                             v-on:change="searchSubset()"
                             v-on:input="valueChanged('padj')"
-                        />
+                        /> -->
                     </div>
                 </div>
                 <div class="window-label">page rank value</div>
                 <div class="menu-items">
-                    <input
-                        id="pagerank"
-                        type="range"
+                    <div id="pagerank"></div>
+                    <input 
+                        type="number"
                         v-bind:min="pr_boundary.min" v-bind:max="pr_boundary.max" v-bind:step="pr_boundary.step"
-                        v-model="pr_boundary.value"
+                        v-model="pr_boundary.minValue"
                         v-on:change="searchSubset()"
-                        v-on:input="valueChanged('pagerank')"
+                        v-on:input="valueChanged('pagerank',[pr_boundary.minValue, pr_boundary.maxValue])"
                     />
+                    <span class="seperator">-</span>
                     <input 
                         type="number"
                         v-bind:min="pr_boundary.min" v-bind:max="pr_boundary.max" v-bind:step="pr_boundary.step"
-                        v-model="pr_boundary.value"
+                        v-model="pr_boundary.maxValue"
                         v-on:change="searchSubset()"
-                        v-on:input="valueChanged('pagerank')"
+                        v-on:input="valueChanged('pagerank',[pr_boundary.minValue, pr_boundary.maxValue])"
                     />
                 </div>
                 <div class="dcoloumn-window"  v-if="dcoloumns">
@@ -85,18 +88,21 @@
                 <div class="d-section-slider" v-show="coloumnsCheck" v-for="(entry, index) in dcoloumns" :key="index">
                 <div class="window-label">{{ entry }}</div>
                     <div class="menu-items">
-                        <input
-                            :id="entry"
-                            type="range"
-                            v-bind:min="dboundaries[entry].min" v-bind:max="dboundaries[entry].max" v-bind:step="dboundaries[entry].step"
-                            v-model="dboundaries[entry].value"
-                            v-on:change="searchSubset()"
+                        <div :id="'deval-slider-' + index"></div>
+                        <input 
+                        type="number"
+                        v-bind:min="dboundaries[entry].min" v-bind:max="dboundaries[entry].max" v-bind:step="dboundaries[entry].step"
+                        v-model="dboundaries[entry].minValue"
+                        v-on:change="searchSubset()"
+                        v-on:input="valueChanged('deval-slider-' + index,[dboundaries[entry].minValue, dboundaries[entry].maxValue])"
                         />
+                        <span class="seperator">-</span>
                         <input 
                             type="number"
                             v-bind:min="dboundaries[entry].min" v-bind:max="dboundaries[entry].max" v-bind:step="dboundaries[entry].step"
-                            v-model="dboundaries[entry].value"
+                            v-model="dboundaries[entry].maxValue"
                             v-on:change="searchSubset()"
+                            v-on:input="valueChanged('deval-slider-' + index,[dboundaries[entry].minValue, dboundaries[entry].maxValue])"
                         />
                     </div>
                 </div>  
@@ -113,6 +119,8 @@
 </template>
 
 <script>
+import * as noUiSlider from 'nouislider';
+import '@/slider.css';
 
 export default {
     name: 'SelectionList',
@@ -123,33 +131,14 @@ export default {
             once: true,
             search_data: null,
             coloumnsCheck:false,
-			degree_boundary: {
-				value: 0,
-				min: 0,
-				max: Number,
-				step: 1
-			},
-            pr_boundary: {
-                value: 0,
-				min: 0,
-				max: Number,
-				step: 0.0001
-            },
-            bc_boundary: {
-				value: 0,
-				min: 0,
-				max: Number,
-				step: 1
-			},
-            padj_boundary: {
-				value: 0,
-				min: 0,
-				max: 1000,
-				step: 1
-			},
+			degree_boundary: { minValue: 0, maxValue: 0, min: 0, max: Number, step: 1},
+            pr_boundary: { minValue: 0, maxValue: 0, min: 0, max: Number, step: 0.01},
+            bc_boundary: { minValue: 0, maxValue: 0, min: 0, max: Number, step: 1},
+            padj_boundary: { value: 0, min: 0, max: 1000, step: 1},
             dcoloumns: this.$store.state.dcoloumns,
             dboundaries: {},
-            nodeCheck: false
+            nodeCheck: false,
+            formatType: null
         }
     },
     watch: {
@@ -184,10 +173,36 @@ export default {
                 var maxDe = Math.max(...result);
                 var minDe = Math.min(...result);
     
-                this.dboundaries[coloumn] = {value:minDe, min: minDe, max: maxDe, step:0.01}
+                this.dboundaries[coloumn] = {minValue:minDe, maxValue:maxDe, min: minDe, max: maxDe, step:0.01}
 
             }
 
+        },
+        create_de(){
+            var com = this;
+
+            Object.entries(com.dcoloumns).forEach(([index, coloumn]) => {
+
+                var slider = document.getElementById('deval-slider-' + index);
+                noUiSlider.create(slider, {
+                    start: [com.dboundaries[coloumn].min, com.dboundaries[coloumn].max],
+                    connect: true,
+                    range: {
+                        'min': com.dboundaries[coloumn].min,
+                        'max': com.dboundaries[coloumn].max
+                    },
+                    step: 0.01
+                });
+    
+                slider.noUiSlider.on('update', function (values, handle) {
+                    com.dboundaries[coloumn][(handle ? "maxValue" : "minValue")] = values[handle];
+                    com.searchSubset()
+                    
+                });
+
+            });
+
+            
         },
         dragElement(elmnt) {
 
@@ -236,37 +251,36 @@ export default {
 			var dataForm = com.data;
 
 			// initialize values of slider
-            // let mean = 0;
             var subset_degree;
 
             subset_degree = dataForm.nodes.map(arrayItem => {
                 return arrayItem.attributes["Degree"]
             });
 
-            // ---mean calculation---
-
             // Convert String values to Integers
             var result = subset_degree.map(function (x) { 
                 return parseInt(x, 10);
             });
 
-            // let sum = result.reduce((accumulator, value) => {
-            //     return accumulator + value;
-            // });
-
-            // mean = sum/subset_degree.length;
-
-            // ---empirical standard deviation---
-
-            // let stdDev = 0;
-            // stdDev = Math.sqrt(result.map(x => Math.pow(x - mean, 2)).reduce((a, b) => a + b) / (subset_degree.length - 1));
-
-            // set init degree and max value
-            // var init_degree = Math.ceil(mean + (2*stdDev));
-            var maxDeg = Math.max(...result);       // Need to use spread operator!
+            var maxDeg = Math.max(...result);        // Need to use spread operator!
+
+            var slider = document.getElementById('degree');
+            noUiSlider.create(slider, {
+                start: [0, maxDeg],
+                connect: true,
+                range: {
+                    'min': 0,
+                    'max': maxDeg
+                },
+                format: this.formatType,
+                step: 1
+            });
 
-            // this.degree_boundary.value = init_degree;
-            this.degree_boundary.max = maxDeg;
+            slider.noUiSlider.on('update', function (values, handle) {
+                com.degree_boundary[(handle ? "maxValue" : "minValue")] = values[handle];
+                com.searchSubset()
+                
+            });
 		},
         initialize_bc() {
             var com = this;
@@ -281,11 +295,27 @@ export default {
 
             // Convert String values to Integers
             var result = subset_bc.map(function (x) { 
-                return parseInt(x, 10);
+                return parseFloat(x, 10);
+            });
+            var maxDeg = Math.max(...result) + 10;       // Need to use spread operator!
+
+            var slider = document.getElementById('betweenes');
+            noUiSlider.create(slider, {
+                start: [0, maxDeg],
+                connect: true,
+                range: {
+                    'min': 0,
+                    'max': maxDeg
+                },
+                format: this.formatType,
+                step: 1
             });
-            var maxDeg = Math.max(...result);       // Need to use spread operator!
 
-            this.bc_boundary.max = maxDeg;
+            slider.noUiSlider.on('update', function (values, handle) {
+                com.bc_boundary[(handle ? "maxValue" : "minValue")] = values[handle];
+                com.searchSubset()
+                
+            });
 
         },
         initialize_pagerank() {
@@ -303,9 +333,26 @@ export default {
             var result = subset_pr.map(function (x) { 
                 return parseFloat(x);
             });
-            var maxDeg = Math.max(...result);       // Need to use spread operator!
+            var maxDeg = Math.abs(Math.log10(Math.min(...result)))+1;   // Need to use spread operator!
+
 
             this.pr_boundary.max = maxDeg;
+            var slider = document.getElementById('pagerank');
+            noUiSlider.create(slider, {
+                start: [0, maxDeg],
+                connect: true,
+                range: {
+                    'min': 0,
+                    'max': maxDeg
+                },
+                step: 0.01
+            });
+
+            slider.noUiSlider.on('update', function (values, handle) {
+                com.pr_boundary[(handle ? "maxValue" : "minValue")] = values[handle];
+                com.searchSubset()
+                
+            });
 
         },
         searchSubset() {
@@ -317,9 +364,12 @@ export default {
 			var nodes = [];
 			// degree filtering
 			for (var element of dataForm){
-				if(parseInt(element.attributes["Degree"]) >= this.degree_boundary.value &&
-                   parseFloat(element.attributes["PageRank"]) >= this.pr_boundary.value &&
-                   parseFloat(element.attributes["Betweenness Centrality"]) >= this.bc_boundary.value
+				if(parseInt(element.attributes["Degree"]) >= this.degree_boundary.minValue &&
+                   parseInt(element.attributes["Degree"]) <= this.degree_boundary.maxValue &&
+                   Math.abs(Math.log10(parseFloat(element.attributes["PageRank"]))) >= this.pr_boundary.minValue &&
+                   Math.abs(Math.log10(parseFloat(element.attributes["PageRank"]))) <= this.pr_boundary.maxValue &&
+                   parseFloat(element.attributes["Betweenness Centrality"]) >= this.bc_boundary.minValue &&
+                   parseFloat(element.attributes["Betweenness Centrality"]) <= this.bc_boundary.maxValue
                    ){
                     if(com.mode=='term'){
                         if(Math.abs(Math.log10(element.attributes["FDR"])) >= com.padj_boundary.value) nodes.push(element)
@@ -327,7 +377,8 @@ export default {
                     else if (this.dcoloumns) {
                         this.nodeCheck = true
                         for (var coloumn of com.dcoloumns){
-                            if(parseFloat(element.attributes[coloumn]) < com.dboundaries[coloumn].value){
+                            if(parseFloat(element.attributes[coloumn]) < com.dboundaries[coloumn].minValue || 
+                               parseFloat(element.attributes[coloumn]) > com.dboundaries[coloumn].maxValue){
                                 this.nodeCheck = false
                                 break;
                             }
@@ -347,10 +398,9 @@ export default {
             this.$emit("selection_active_changed", false);
             // if(this.active_subset) this.emitter.emit("searchSubset", {subset:this.search_data, mode:this.mode});
         },
-        valueChanged(id){
-            var target = document.getElementById(id)
-            let a = (target.value / target.max)* 100;
-            target.style.background = `linear-gradient(to right,#0A0A1A,#0A0A1A ${a}%,#ccc ${a}%)`;
+        valueChanged(id, value){
+            var slider = document.getElementById(id)
+            slider.noUiSlider.set(value);
         },
         term_genes(list){
             var term_genes = new Set(list)
@@ -359,6 +409,15 @@ export default {
         }
 	},
     mounted(){
+
+        this.formatType = {
+            from: function(value) {
+                return parseInt(value);
+            },
+            to: function(value) {
+                return parseInt(value);
+            }
+        }
     
         if(this.mode=="protein"){
             this.search_data = this.$store.state.active_subset ? this.term_genes(this.$store.state.active_subset): this.data.nodes
@@ -366,12 +425,15 @@ export default {
             this.search_data = this.$store.state.p_active_subset ? this.term_genes(this.$store.state.p_active_subset): this.data.nodes
         }
         this.dragElement(document.getElementById("selection_highlight"));
-        
-    },
-    created() {
+
         this.initialize_dg()
         this.initialize_bc()
         this.initialize_pagerank()
+        if (this.dcoloumns) this.create_de()
+
+        
+    },
+    created() {
         if (this.dcoloumns) this.initialize_de()
     }
 }
@@ -391,6 +453,9 @@ export default {
     overflow-y: scroll;
     overflow-x: hidden;
 }
+.selection_list .menu-items{
+    display: flex;
+}
 /* Hide scrollbar for Chrome, Safari and Opera */
 .selection_list::-webkit-scrollbar {
     display: none;
@@ -402,21 +467,33 @@ export default {
     overflow-x: hidden;    /* Hide overflow content */
     text-overflow: ellipsis;
 }
+#degree {
+    margin:0.5vw 0.5vw 0.5vw 0;
+}
+
+#betweenes {
+    margin:0.5vw 0.5vw 0.5vw 0;
+}
+
+#pagerank {
+    margin:0.5vw 0.5vw 0.5vw 0;
+}
+
+[id^="deval-slider-"]{
+    margin:0.5vw 0.5vw 0.5vw 0;
+}
 
 .selection_list input[type=number] { 
-    position: absolute;
-    margin-top:0.2vw;
-    right: 5%;
-    width: 20%;
+    width: 10%;
     border: none;
-    height: 6%;
     font-family: 'ABeeZee', sans-serif;
-    font-size: 0.7vw;
-    color:  white;
+    font-size: 0.5vw;
+    color: white;
     background: none;
     -moz-appearance: textfield;
+    -webkit-appearance: textfield;
     appearance: textfield;
-    text-align: right;
+    text-align: center;
 }
 
 .selection_list input[type=range]{
@@ -436,6 +513,13 @@ export default {
     border-radius: 50%;
 }
 
+.seperator {
+    font-size: 0.5vw;
+    margin: 0 0.1vw 0 0.1vw;
+    align-self: center;
+    justify-content: center;
+}
+
 .dcoloumn-window {
     width: 100%;
     height: 100%;
diff --git a/frontend/src/slider.css b/frontend/src/slider.css
new file mode 100644
index 00000000..6b697b20
--- /dev/null
+++ b/frontend/src/slider.css
@@ -0,0 +1,276 @@
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+ .noUi-target,
+ .noUi-target * {
+   -webkit-touch-callout: none;
+   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+   -webkit-user-select: none;
+   -ms-touch-action: none;
+   touch-action: none;
+   -ms-user-select: none;
+   -moz-user-select: none;
+   user-select: none;
+   -moz-box-sizing: border-box;
+   box-sizing: border-box;
+ }
+ .noUi-target {
+   position: relative;
+ }
+ .noUi-base,
+ .noUi-connects {
+   width: 100%;
+   height: 100%;
+   position: relative;
+   z-index: 1;
+ }
+ /* Wrapper for all connect elements.
+  */
+ .noUi-connects {
+   overflow: hidden;
+   z-index: 0;
+ }
+ .noUi-connect,
+ .noUi-origin {
+   will-change: transform;
+   position: absolute;
+   z-index: 1;
+   top: 0;
+   right: 0;
+   height: 100%;
+   width: 100%;
+   -ms-transform-origin: 0 0;
+   -webkit-transform-origin: 0 0;
+   -webkit-transform-style: preserve-3d;
+   transform-origin: 0 0;
+   transform-style: flat;
+ }
+ /* Offset direction
+  */
+ .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+   left: 0;
+   right: auto;
+ }
+ /* Give origins 0 height/width so they don't interfere with clicking the
+  * connect elements.
+  */
+ .noUi-vertical .noUi-origin {
+   top: -100%;
+   width: 0;
+ }
+ .noUi-horizontal .noUi-origin {
+   height: 0;
+ }
+ .noUi-handle {
+   -webkit-backface-visibility: hidden;
+   backface-visibility: hidden;
+   position: absolute;
+ }
+ .noUi-touch-area {
+   height: 100%;
+   width: 100%;
+ }
+ .noUi-state-tap .noUi-connect,
+ .noUi-state-tap .noUi-origin {
+   -webkit-transition: transform 0.3s;
+   transition: transform 0.3s;
+ }
+ .noUi-state-drag * {
+   cursor: inherit !important;
+ }
+ /* Slider size and handle placement;
+  */
+ .noUi-horizontal {
+   height: 18px;
+ }
+ .noUi-horizontal .noUi-handle {
+    width: 0.7vw;
+    height: 0.7vw;
+    right: -0.5vw;
+    top: -0.2vw;
+ }
+ .noUi-vertical {
+   width: 18px;
+ }
+ .noUi-vertical .noUi-handle {
+   width: 28px;
+   height: 34px;
+   right: -6px;
+   bottom: -17px;
+ }
+ .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+   left: -17px;
+   right: auto;
+ }
+ /* Styling;
+  * Giving the connect element a border radius causes issues with using transform: scale
+  */
+ .noUi-target {
+   height: 0.3vw;
+   width: 10vw;
+   background: #ccc;
+ }
+ .noUi-connects {
+   border-radius: 3px;
+ }
+ .noUi-connect {
+   background: #0A0A1A;
+ }
+ /* Handles and cursors;
+  */
+ .noUi-draggable {
+   cursor: ew-resize;
+ }
+ .noUi-vertical .noUi-draggable {
+   cursor: ns-resize;
+ }
+ .noUi-handle {
+   border-radius: 100%;
+   background: #FFF;
+   cursor: default;
+ }
+ .noUi-active {
+   box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
+ }
+ /* Disabled state;
+  */
+ [disabled] .noUi-connect {
+   background: #B8B8B8;
+ }
+ [disabled].noUi-target,
+ [disabled].noUi-handle,
+ [disabled] .noUi-handle {
+   cursor: not-allowed;
+ }
+ /* Base;
+  *
+  */
+ .noUi-pips,
+ .noUi-pips * {
+   -moz-box-sizing: border-box;
+   box-sizing: border-box;
+ }
+ .noUi-pips {
+   position: absolute;
+   color: #999;
+ }
+ /* Values;
+  *
+  */
+ .noUi-value {
+   position: absolute;
+   white-space: nowrap;
+   text-align: center;
+ }
+ .noUi-value-sub {
+   color: #ccc;
+   font-size: 10px;
+ }
+ /* Markings;
+  *
+  */
+ .noUi-marker {
+   position: absolute;
+   background: #CCC;
+ }
+ .noUi-marker-sub {
+   background: #AAA;
+ }
+ .noUi-marker-large {
+   background: #AAA;
+ }
+ /* Horizontal layout;
+  *
+  */
+ .noUi-pips-horizontal {
+   padding: 10px 0;
+   height: 80px;
+   top: 100%;
+   left: 0;
+   width: 100%;
+ }
+ .noUi-value-horizontal {
+   -webkit-transform: translate(-50%, 50%);
+   transform: translate(-50%, 50%);
+ }
+ .noUi-rtl .noUi-value-horizontal {
+   -webkit-transform: translate(50%, 50%);
+   transform: translate(50%, 50%);
+ }
+ .noUi-marker-horizontal.noUi-marker {
+   margin-left: -1px;
+   width: 2px;
+   height: 5px;
+ }
+ .noUi-marker-horizontal.noUi-marker-sub {
+   height: 10px;
+ }
+ .noUi-marker-horizontal.noUi-marker-large {
+   height: 15px;
+ }
+ /* Vertical layout;
+  *
+  */
+ .noUi-pips-vertical {
+   padding: 0 10px;
+   height: 100%;
+   top: 0;
+   left: 100%;
+ }
+ .noUi-value-vertical {
+   -webkit-transform: translate(0, -50%);
+   transform: translate(0, -50%);
+   padding-left: 25px;
+ }
+ .noUi-rtl .noUi-value-vertical {
+   -webkit-transform: translate(0, 50%);
+   transform: translate(0, 50%);
+ }
+ .noUi-marker-vertical.noUi-marker {
+   width: 5px;
+   height: 2px;
+   margin-top: -1px;
+ }
+ .noUi-marker-vertical.noUi-marker-sub {
+   width: 10px;
+ }
+ .noUi-marker-vertical.noUi-marker-large {
+   width: 15px;
+ }
+ .noUi-tooltip {
+   display: block;
+   position: absolute;
+   border: 1px solid #D9D9D9;
+   border-radius: 3px;
+   background: #fff;
+   color: #000;
+   padding: 5px;
+   text-align: center;
+   white-space: nowrap;
+ }
+ .noUi-horizontal .noUi-tooltip {
+   -webkit-transform: translate(-50%, 0);
+   transform: translate(-50%, 0);
+   left: 50%;
+   bottom: 120%;
+ }
+ .noUi-vertical .noUi-tooltip {
+   -webkit-transform: translate(0, -50%);
+   transform: translate(0, -50%);
+   top: 50%;
+   right: 120%;
+ }
+ .noUi-horizontal .noUi-origin > .noUi-tooltip {
+   -webkit-transform: translate(50%, 0);
+   transform: translate(50%, 0);
+   left: auto;
+   bottom: 10px;
+ }
+ .noUi-vertical .noUi-origin > .noUi-tooltip {
+   -webkit-transform: translate(0, -18px);
+   transform: translate(0, -18px);
+   top: auto;
+   right: 28px;
+ }
+ 
\ No newline at end of file