Support for range labels on <Slider>

platypush/backend/http/webapp/src/components/elements/Slider.vue

@@ -1,5 +1,11 @@
 <template>
   <label class="slider-wrapper">
+    <span class="range-labels" :class="{'with-label': withLabel}" v-if="withRange">
+      <span class="label left" v-if="withRange" v-text="range[0]" />
+      <span class="label right" v-if="withRange" v-text="range[1]" />
+    </span>
+
+    <span class="slider-container">
       <input class="slider"
              type="range"
              :class="{'with-label': withLabel}"
@@ -17,6 +23,7 @@
       </div>
       <div class="thumb" ref="thumb"></div>
       <span class="label" v-if="withLabel" v-text="value" ref="label"></span>
+    </span>
   </label>
 </template>
 
@@ -47,6 +54,11 @@ export default {
     withLabel: {
       type: Boolean,
       default: false,
+    },
+
+    withRange: {
+      type: Boolean,
+      default: false,
     }
   },
 
@@ -77,6 +89,7 @@ export default {
   mounted() {
     if (this.value != null)
       this.update(this.value)
+    this.$watch(() => this.value, (newValue) => this.update(newValue))
   },
 }
 </script>
@@ -88,6 +101,13 @@ $label-width: 3em;
   width: 100%;
   display: flex;
   position: relative;
+  flex-direction: column;
+
+  .slider-container {
+    width: 100%;
+    display: flex;
+    position: relative;
+  }
 
   .slider {
     width: 100%;
@@ -99,6 +119,18 @@ $label-width: 3em;
     }
   }
 
+  .range-labels {
+    width: 100%;
+
+    &.with-label {
+      width: calc(100% - $label-width);
+    }
+
+    .right {
+      @extend .pull-right;
+    }
+  }
+
   .track {
     width: 100%;
     height: 0.75em;