<template>
  <q-badge class="q-mx-sm" color="primary"> {{ label }} <span v-if="modelValue && showvalue"> ({{ modelValue }})</span> </q-badge>
  <div class="q-pa-xs row no-wrap">
    <q-btn
      icon="fas fa-minus"
      @click="decrementValue"
      :disable="disable || !sliderValue"
      flat
      dense
    />
    <q-btn
      label="-1"
      @click="decrementValueMinus1"
      :disable="disable || !sliderValue"
      flat
      dense
    />
    <q-input
      style="width: 170px"
      dense
      v-model="sliderValue"
      filled
      :disable="disable"
    >
    </q-input>
    <q-btn dense label="+1" @click="incrementValuePlus1" :disable="disable" flat />
    <q-btn dense icon="fas fa-plus" @click="incrementValue" :disable="disable" flat />

    <q-slider
      :disable="disable"
      v-model="sliderValue"
      :min="min"
      :max="max"
      :color="color"
    />
  </div>
</template>

<script lang="ts" src="./CMySlider.ts">
</script>

<style lang="scss" scoped>
@import './CMySlider.scss';
</style>
