allow for slider to have one handle

Author: supalarry

frontend/src/components/shared/FilterSlider.vue

@@ -5,9 +5,9 @@
         <div class="w-full flex justify-between">
           <h1 class="text-xl text-purple-matcha capitalize">{{ name }}</h1>
           <h1 class="text-xl text-purple-matcha">
-            <span class="">{{this.slider.startMin}} {{this.unit}}</span>
-            to
-            <span class="">{{this.slider.startMax}} {{this.unit}}</span></h1>
+            <span class="">{{this.slider.startMin}}<span v-if="oneHandle"> {{this.unit}}</span></span>
+            <span v-if="!oneHandle"> to </span>
+            <span v-if="!oneHandle" class="">{{this.slider.startMax}} {{this.unit}}</span></h1>
         </div>
       </div>
       <div ref="slider" class="mx-auto w-full mb-4 px-4 max-w-md"></div>
@@ -19,7 +19,7 @@ import noUiSlider from 'nouislider';
 import 'nouislider/distribute/nouislider.css';
 
 export default {
-  props: ['options', 'name', 'unit', 'min', 'max'],
+  props: ['options', 'name', 'unit', 'min', 'max', 'oneHandle'],
   data: () => ({
     slider: {
       startMin: null,
@@ -36,8 +36,14 @@ export default {
     this.slider.min = this.min;
     this.slider.max = this.max;
     this.slider.start = this.min;
+    let start;
+    if (this.oneHandle) {
+      start = 0;
+    } else {
+      start = [this.slider.startMin, this.slider.startMax];
+    }
     noUiSlider.create(this.$refs.slider, {
-      start: [this.slider.startMin, this.slider.startMax],
+      start,
       step: this.slider.step,
       range: {
         min: this.slider.min,
@@ -47,7 +53,7 @@ export default {
     this.$refs.slider.noUiSlider.on('update', (values) => {
       this.slider.startMin = parseInt(values[0], 10);
       this.slider.startMax = parseInt(values[1], 10);
-      this.$emit('saveFilter', this.name, this.slider.startMin, this.slider.startMax);
+      this.$emit('saveFilter', this.name, this.slider.startMin, this.slider.startMax, this.oneHandle);
     });
   },
 };