<template>
  <div class="audio-size">
    <div class="title">{{ title }}</div>
    <div class="slider">
      <el-slider v-model="data" :show-tooltip="false"/>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    value: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      data: 1,
    }
  },
  watch: {
    value(value) {
      this.data = value
    },
    data(value) {
      this.$emit('input', value)
      this.$emit('on-change', value)
    },
  },
  created() {
    this.data = this.value
  },
  methods: {},
}
</script>

<style lang="scss" scoped>
.audio-size {
  .title {
    margin: 4px 0;
    text-align: left;
  }
  .slider {
    /deep/ {
      .el-slider__bar {
        background-color: #17c2cc;
      }
      .el-slider__button {
        border: solid 2px #17c2cc;
        background-color: #17c2cc;
      }
    }
  }
}
</style>
