QSlider and QRange custom values for labels

Author: rstoenescu

dev/components/form/range.vue

@@ -59,6 +59,14 @@
       </p>
       <q-range v-model="label" :min="-20" :max="20" :step="4" label-always></q-range>
 
+      <p class="caption">
+        With custom values for labels
+        <span class="label inline bg-secondary text-white">
+          Model <span class="right-detail"><em>{{label.min}} to {{label.max}}</em> &nbsp;&nbsp;(-20 to 20, step 4)</span>
+        </span>
+      </p>
+      <q-range v-model="label" :min="-20" :max="20" :step="4" label-always :left-label-value="`${label.min}px`" :right-label-value="`${label.max}px`"></q-range>
+
       <p class="caption">
         Drag Range
         <span class="label inline bg-secondary text-white">

dev/components/form/slider.vue

@@ -58,6 +58,14 @@
       </p>
       <q-slider v-model="label" :min="-20" :max="20" :step="4" label-always></q-slider>
 
+      <p class="caption">
+        With custom value for Label
+        <span class="label inline bg-secondary text-white">
+          Model <span class="right-detail"><em>{{label}}</em> &nbsp;&nbsp;(-20 to 20, step 4)</span>
+        </span>
+      </p>
+      <q-slider v-model="label" :min="-20" :max="20" :step="4" label :label-value="`${label}px`" label-always />
+
       <p class="caption">Disabled State</p>
       <q-slider v-model="standalone" :min="0" :max="50" disable></q-slider>
 

src/components/range/QRange.vue

@@ -33,7 +33,7 @@
           :class="{'label-always': labelAlways}"
           v-if="label || labelAlways"
         >
-          {{ value.min }}
+          {{ leftDisplayValue }}
         </q-chip>
 
         <div v-if="$q.theme !== 'ios'" class="q-slider-ring"></div>
@@ -51,7 +51,7 @@
           :class="{'label-always': labelAlways}"
           v-if="label || labelAlways"
         >
-          {{ value.max }}
+          {{ rightDisplayValue }}
         </q-chip>
 
         <div v-if="$q.theme !== 'ios'" class="q-slider-ring"></div>
@@ -92,7 +92,9 @@ export default {
       }
     },
     dragRange: Boolean,
-    dragOnlyRange: Boolean
+    dragOnlyRange: Boolean,
+    leftLabelValue: String,
+    rightLabelValue: String
   },
   data () {
     return {
@@ -110,6 +112,16 @@ export default {
     },
     activeTrackWidth () {
       return 100 * (this.percentageMax - this.percentageMin) + '%'
+    },
+    leftDisplayValue () {
+      return this.leftLabelValue !== void 0
+        ? this.leftLabelValue
+        : this.value.min
+    },
+    rightDisplayValue () {
+      return this.rightLabelValue !== void 0
+        ? this.rightLabelValue
+        : this.value.max
     }
   },
   watch: {

src/components/slider/QSlider.vue

@@ -31,7 +31,7 @@
           :class="{'label-always': labelAlways}"
           v-if="label || labelAlways"
         >
-          {{ value }}
+          {{ displayValue }}
         </q-chip>
 
         <div v-if="$q.theme !== 'ios'" class="q-slider-ring"></div>
@@ -59,7 +59,8 @@ export default {
     value: {
       type: Number,
       required: true
-    }
+    },
+    labelValue: String
   },
   data () {
     return {
@@ -73,6 +74,11 @@ export default {
         return (this.value - this.min) / (this.max - this.min) * 100 + '%'
       }
       return 100 * this.currentPercentage + '%'
+    },
+    displayValue () {
+      return this.labelValue !== void 0
+        ? this.labelValue
+        : this.value
     }
   },
   watch: {