<template>
  <div style="width: 380px">
    <q-banner
      rounded
      dense
      class="bg-orange-2 text-red"
      color="primary q-title"
      style="text-align: center"
    >
      {{ label }}
    </q-banner>

    <div v-if="internalModel" class="column">
      <CMySlider
        label="Top:"
        v-model="internalModel.top"
        :min="10"
        :max="1000"
        color="green"
        :addstr="addstr"
        @update:model-value="modifValueTop"
      ></CMySlider>
      <CMySlider
        label="Bottom:"
        v-model="internalModel.bottom"
        :min="10"
        :max="1000"
        color="red"
        :addstr="addstr"
        @update:model-value="modifValueBottom"
      ></CMySlider>
      <CMySlider
        label="Left:"
        v-model="internalModel.left"
        :min="10"
        :max="1000"
        color="orange"
        :addstr="addstr"
        @update:model-value="modifValueLeft"
      ></CMySlider>
      <CMySlider
        label="Right:"
        v-model="internalModel.right"
        :min="10"
        :max="1000"
        color="fuchsia"
        :addstr="addstr"
        @update:model-value="modifValueRight"
      ></CMySlider>
    </div>
  </div>
</template>

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

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