<template>
  <div>
    <hive-slider
      :marks="numArr"
      :default-value="44"
      :step="10"
      :render-tip="handleCustomTip"
      @onChange="handleChange"
      show-tool-tip
    />
    <hive-slider
      :default-value="30"
      @renderTip="handleCustomTip"
      @onChange="handleChange"
    />
  </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>
