<template>
  <div>
    <hive-slider
      :marks="numArr"
      :defaultValue="44"
      :step="10"
      :renderTip="handleCustomTip"
      @onChange="handleChange"
      showToolTip
    ></hive-slider>
    <hive-slider
      :defaultValue="30"
      @renderTip="handleCustomTip"
      @onChange="handleChange"
    ></hive-slider>
  </div>

</template>
<script>
  export default {
    data() {
      return {
        numArr: [],
      };
    },
    beforeMount() {
      for (let i = 0; i <= 10; i++) {
        this.numArr.push((i * 10) + '%');
      };
    },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      handleCustomTip(value) {
        return `${value}%`;
      },
    },
  };
</script>
