fix label and sliderbar showup

src/components/Inputs/SliderInput/SliderInput.vue

@@ -3,13 +3,11 @@
     <vue-slider 
       v-model="input" 
       :lazy="true" 
-      :min="minValue" 
-      :max="maxValue" 
-      :step="step" 
+      :data="interval"
       :marks="marks"
       :process="false">
     </vue-slider>
-    <b-row class="mt-3 pt-3 pl-0 pr-0">
+    <b-row class="mt-1 pt-1 pl-0 pr-0">
       <div class="col text-left pr-0 pl-0">
         <span v-if="getMinImageLabel">
           <img class="imgLabel" :src="getMinImageLabel" />
@@ -45,56 +43,54 @@ export default {
   },
   computed: {
     minValue() {
-      return this.constraints['http://schema.org/minValue'] ?? 0;
+      return parseInt(this.constraints['http://schema.org/minValue']?.[0]?.['@value'] || 0);
     },
     maxValue() {
-      return this.constraints['http://schema.org/maxValue'] ?? 100;
+      return parseInt(this.constraints['http://schema.org/maxValue']?.[0]?.['@value'] || 100);
     },
-    step() {
-      return 1;
+    interval() {
+      const arr = [];
+      for (let i = this.minValue; i <= this.maxValue; i++) {
+        arr.push(i);
+      }
+      return arr;
     },
     marks() {
       const choices = this.constraints['http://schema.repronim.org/choices'] || [];
-      if (choices.length <= 1) return {};
-
-      const range = this.maxValue - this.minValue;
+      
+      // Initialize marks with min and max values as labels
       const marks = {
-        [this.minValue]: this.minLabel,
+        [this.minValue]: this.minValue.toString(),
+        [this.maxValue]: this.maxValue.toString()
       };
-
-      // Add middle marks with evenly distributed positions
-      if (choices.length > 2) {
-        const middleChoices = choices.length - 2;
-        for (let i = 0; i < middleChoices; i++) {
-          const position = this.minValue + ((i + 1) * range) / (choices.length - 1);
-          marks[Math.round(position)] = this.getLabel(i + 1);
-        }
-      }
-
-      marks[this.maxValue] = this.maxLabel;
+      
+      // Add marks for each choice if available
+      choices.forEach((choice, index) => {
+        const value = this.minValue + (index * ((this.maxValue - this.minValue) / (choices.length - 1)));
+        marks[Math.round(value)] = '';
+      });
+      
       return marks;
     },
     minLabel() {
-      return this.getLabel(0);
+      const label = this.getLabel(0);
+      return label || ''; // Return empty string if no label
     },
     midLabel() {
       const choices = this.constraints['http://schema.repronim.org/choices'] || [];
       if (choices.length !== 3) return '';
-      return this.getLabel(1);
+      const label = this.getLabel(1);
+      return label || ''; // Return empty string if no label
     },
     maxLabel() {
       const choices = this.constraints['http://schema.repronim.org/choices'] || [];
-      return choices.length > 1 ? this.getLabel(choices.length - 1) : '';
+      if (choices.length <= 1) return '';
+      const label = this.getLabel(choices.length - 1);
+      return label || ''; // Return empty string if no label
     },
-    getLabel(index) {
-      const choices = this.constraints['http://schema.repronim.org/choices'];
-      if (!choices?.[index]?.['http://schema.org/name']) {
-        return '';
-      }
-
-      const labels = choices[index]['http://schema.org/name'];
-      return labels.find(label => label['@language'] === this.selected_language)?.['@value'] 
-        ?? '';
+    showMidLabel() {
+      const choices = this.constraints['http://schema.repronim.org/choices'] || [];
+      return choices.length === 3;
     },
     getMinImageLabel() {
       const choices = this.constraints['http://schema.repronim.org/choices'];
@@ -103,26 +99,31 @@ export default {
     getMaxImageLabel() {
       const choices = this.constraints['http://schema.repronim.org/choices'];
       return choices?.[choices?.length - 1]?.['http://schema.org/image']?.[0]?.['@value'] ?? false;
-    },
-    showMidLabel() {
-      const choices = this.constraints['http://schema.repronim.org/choices'] || [];
-      return choices.length === 3;
-    },
+    }
   },
+
   methods: {
+    getLabel(index) {
+      const choices = this.constraints['http://schema.repronim.org/choices'];
+      if (!choices?.[index]?.['http://schema.org/name']) {
+        return '';
+      }
+
+      const labels = choices[index]['http://schema.org/name'];
+      return labels.find(label => label['@language'] === this.selected_language)?.['@value'] 
+        ?? '';
+    },
     sendData(e) {
       e.preventDefault();
       this.$emit('valueChanged', this.input);
-    },
+    }
   },
+
   data() {
     return {
-      input: null,
+      input: this.init ?? this.minValue
     };
-  },
-  mounted() {
-    this.input = this.init ?? Math.floor(this.minValue + (this.maxValue - this.minValue) / 2);
-  },
+  }
 };
 </script>
 
@@ -134,6 +135,5 @@ export default {
 
 .vue-slider-marks {
   font-size: 14px;
-  padding-bottom: 8px;
 }
 </style>