<template>
  <SimpleBoilerplateElement :id="this.id">
    <q-badge color="primary">
      {{ $t('element.spacer') }} {{ $t('spacerElement.height') }}:  {{ elementData.height + ' px'}}
    </q-badge>
    <q-slider v-model="elementData.height" :min="1" :max="50" :step="1"/>
  </SimpleBoilerplateElement>
</template>

<script>
import SimpleBoilerplateElement from 'src/components/SimpleBoilerplateElement.vue'

export default {
  data () {
    return {
      elementData: this.data
    }
  },
  props: {
    id: {
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  },
  components: {
    SimpleBoilerplateElement
  }
}
</script>