Show slider-value always

Author: katharina-schulze

viplab-standalone-frontend-vue/src/components/SliderElement.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="slider-component">
     <div class ="item-name">{{slider.metadata.name}}:</div>
-    <div v-if="slider.value.length > 1">
-        <vue-slider multiple v-model="vModel" :min="slider.min" :max="slider.max" :interval="slider.step" :direction="sliderDirection(slider)" style="height: 300px;[slider.metadata.vertical ? {'height': '300px'} : {}]"></vue-slider>
+    <div v-if="slider.value.length > 1" :class="slider.metadata.vertical? 'mt-3' : 'mt-5'">
+        <vue-slider v-model="vModel" :min="slider.min" :max="slider.max" :interval="slider.step" :direction="sliderDirection(slider)" style="height: 300px;[slider.metadata.vertical ? {'height': '300px'} : {}]" tooltip="always" :tooltipPlacement="slider.metadata.vertical? 'right' : 'top'"></vue-slider>
     </div>
-    <div v-else>
-        <vue-slider v-model="vModel" :min="slider.min" :max="slider.max" :interval="slider.step" :direction="sliderDirection(slider)" :style="[slider.metadata.vertical ? {'height': '300px'} : {}]"></vue-slider>
+    <div v-else :class="slider.metadata.vertical? 'mt-3' : 'mt-5'">
+        <vue-slider v-model="vModel" :min="slider.min" :max="slider.max" :interval="slider.step" :direction="sliderDirection(slider)" :style="[slider.metadata.vertical ? {'height': '300px'} : {}]" tooltip="always" :tooltipPlacement="slider.metadata.vertical? 'right' : 'top'"></vue-slider>
     </div>
   </div>
 </template>

viplab-standalone-frontend-vue/src/input/workshop-snakemake-example.computation-template.json

@@ -61,6 +61,23 @@
                         "max": 10,
                         "step": 0.01,
                         "validation": "range"
+                    },
+                    {
+                        "mode": "any",
+                        "identifier": "__scale2__",
+                        "metadata": {
+                            "guiType": "slider",
+                            "name": "Scale",
+                            "vertical": true,
+                            "description" : "Enter value for scale"
+                        },
+                        "default": [
+                            0.05
+                        ],
+                        "min": 0.05,
+                        "max": 10,
+                        "step": 0.01,
+                        "validation": "range"
                     }
                 ],
                 "content": "c2NhbGU6IHt7X19zY2FsZV9ffX0NCg"