- Cataloghi: pagine, schede, formato

src/components/CMySlider/CMySlider.ts

@@ -51,13 +51,46 @@ export default defineComponent({
         let mystr = props.modelValue + ''
         return mystr.replace(props.addstr, '')
       },
-      set: (value) => emit('update:modelValue', value + props.addstr)
+      set: (value) => emit('update:modelValue', value ? value + props.addstr : '')
     })
 
+    function valoreinc() {
+      let mioval = parseFloat(sliderValue.value)
+      if (mioval >= 1000) {
+        return 20
+      } else if (mioval >= 500) {
+        return 10
+      } else if (mioval >= 100) {
+        return 5
+      } else {
+        return 1
+      }
+    }
+
+    function incrementValue() {
+      if (!sliderValue.value) {
+        sliderValue.value = '1'
+      } else {
+        sliderValue.value = (parseFloat(sliderValue.value) + valoreinc()) + ''; // Aumenta il valore
+      }
+    }
+
+    function decrementValue() {
+      if (sliderValue.value === '0') {
+        sliderValue.value = ''
+      } else if (!sliderValue.value) {
+        // niente
+      } else {
+        sliderValue.value = (parseFloat(sliderValue.value) - valoreinc()) + ''; // Diminuisci il valore        
+      }
+    }
+
     return {
       t,
       shared_consts,
       sliderValue,
+      incrementValue,
+      decrementValue
     }
   }
 })

src/components/CMySlider/CMySlider.vue

@@ -1,17 +1,29 @@
 <template>
-  <div class="q-pa-xs" style="width: 170px">
-    <q-badge color="primary"> {{ label }} {{ modelValue }} </q-badge>
-
+  <q-badge color="primary"> {{ label }} {{ modelValue }} </q-badge>
+  <div class="q-pa-xs row no-wrap">
+    <q-btn
+      icon="fas fa-minus"
+      @click="decrementValue"
+      :disable="disable || !sliderValue"
+      flat
+    />
     <q-input
+      style="width: 150px"
       dense
       v-model="sliderValue"
       filled
       :disable="disable"
     >
     </q-input>
+    <q-btn icon="fas fa-plus" @click="incrementValue" :disable="disable" flat />
 
-    <q-slider :disable="disable" v-model="sliderValue" :min="min" :max="max" :color="color" />
-
+    <q-slider
+      :disable="disable"
+      v-model="sliderValue"
+      :min="min"
+      :max="max"
+      :color="color"
+    />
   </div>
 </template>